CSS 下拉內容的對齊方式
阿新 • • 發佈：2018-12-11
<!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>
