CSS 【2018.12.01】
阿新 • • 發佈:2018-12-01
<!DOCTYPE html> <html> <head> <title>下拉選單例項</title> <meta charset="gbk"/> <style type="text/css"> .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:0; 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="#">12312 1 </a> <a href="#">12312 1 </a> <a href="#">12312 1 </a> </div> </div> <div class="dropdown" style="float:right"> <button class="dropbtn">右</button> <div class="dropdown-content"> <a href="#">12312 1 </a> <a href="#">12312 1 </a> <a href="#">12312 1 </a> </div> </div> </body> </html>