版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lengyuezuixue/article/details/82806961
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.dropbtn {
background-color:#4CAF50;
color:white;
padding:16px;
font-size:16px;
border:none;
cursor:pointer;
}
.dropdown {
position:relative;
display:inline-block;
}
.dropdown-content {
display:none;
position:absolute;
right:0px;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover {
background-color:#f1f1f1;
}
.dropdown:hover .dropdown-content {
display:block;
}
.dropdown:hover .dropbtn {
background-color:#3e8e41;
}
</style>
</head>
<body >
<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">左</button>
<div class="dropdown-content" style="left:0;">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">右</button>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</body>
</html>
