可以錯開內聯菜單嗎？

Question

我有一個具有這樣的背景的菜單：

我正在使用菜單項的無序列表-主頁，產品，特價商品，文章和聯系方式，並希望將所有項目顯示在相應的選項卡中：

使用CSS，我可以使列表中的第一個項目與其框對齊，但其余的則不行-

#top_menu li {
    display: inline-block;
    padding-right: 44px;
    padding-top: 73px;
}

我嘗試將填充物添加到單個項目中，但沒有任何運氣。

我也嘗試為每個項目添加邊距頂部（按照這個問題Stagger或Stair-Case a Menu ），但這似乎對我也不起作用。

甚至可以錯開這樣的鋰物品嗎？ 還是有更好的方法來做到這一點？

理想情況下，如果可能的話，我想做的就是完全用CSS創建選項卡框效果。 但是，我仍然為交錯的布局感到困惑。

任何想法表示贊賞！

Answer 1

確保您的li位置相對。

然后使用top進行樣式設置。

看我的代碼...

 ul { margin-left: .25em; padding-left: 0; list-style: none; } li { position: relative; margin-left: 0; padding-left: 0; display: inline-block; width: 75px; height: 30px; border: 1px solid red; } li:nth-child(2) { top: 10px; } li:nth-child(3) { top: 20px; } li:nth-child(4) { top: 30px; } li:nth-child(5) { top: 40px; } 

 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

Answer 2

這應該做您想做的事：

 #top_menu { list-style: none; } #top_menu li { float: left; clear: none; position: relative; padding: 2px 6px; margin-right: 2px; background-color: #09f; } #top_menu li a { color: #fff; text-decoration: none; } #top_menu li:nth-child(2) { margin-top: 5px; } #top_menu li:nth-child(3) { margin-top: 10px; } #top_menu li:nth-child(4) { margin-top: 15px; } #top_menu li:nth-child(5) { margin-top: 20px; } 

 <ul id="top_menu"> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> 

輸出：