css-base-控制li標籤a標籤顯示方向
阿新 • • 發佈：2021-11-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /*li 標籤縱向變橫向方式一 */ .ul1 li { display: inline-block; } /* li 標籤縱向變橫向方式二 */ .ul2 li { float: left; list-style: none; margin-left: 5px; } /*滑鼠滑過控制樣式*/ .ul2 li:hover { background-color: red; color: white; /*滑鼠指標變成小手形狀*/ cursor: pointer; } .ul2 li:first-child{ margin: 0; } .ul2 li:last-child{ float:none; } /* a標籤 橫向變縱向顯示 */ .menu-a a{ display: block; } </style> </head> <body> <div> <ul class="ul1"> <li>系統管理</li> <li>使用者管理</li> <li>部門管理</li> </ul> </div> <div> <ul class="ul2"> <li>系統管理</li> <li>使用者管理</li> <li>部門管理</li> </ul> </div> <div class="menu-a"> <a href="">數學</a> <a href="">語文</a> <a href="">英語</a> <a href="">歷史</a> </div> </body> </html>