CSS橫向菜單是Web開發中非常常見的一種布局方式,通常用于網站導航。在本文中,我們將介紹如何創建一個具有6個菜單項的CSS橫向菜單。
<!-- HTML代碼 --> <div class="menu"> <ul> <li><a href="#">菜單項1</a></li> <li><a href="#">菜單項2</a></li> <li><a href="#">菜單項3</a></li> <li><a href="#">菜單項4</a></li> <li><a href="#">菜單項5</a></li> <li><a href="#">菜單項6</a></li> </ul> </div> <!-- CSS代碼 --> .menu { background-color: #f2f2f2; padding: 10px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { display: inline-block; margin-right: 10px; } .menu li:last-child { margin-right: 0; } .menu a { display: block; text-decoration: none; color: #333; padding: 5px 10px; } .menu a:hover { background-color: #333; color: #fff; }
在上面的代碼中,我們使用div容器包含ul列表,并將菜單項設置為inline-block元素,使它們可以水平排列。同時使用a標記作為超鏈接,在a標記中設置padding值來增加菜單項的大小。
為了顯示鼠標懸停時的效果,我們使用:hover選擇器來設置菜單項的背景色和顏色。
最后,通過設置margin-right的屬性值來確定菜單項之間的間距。
通過上述代碼,我們就可以輕松地創建一個6項橫向菜單,而且可以根據需要進行調整。
上一篇css橫向滑動隱藏滾動條
下一篇css橫線上加文字