使用CSS和單個列表進行簡單的2列導航？

我期待通過使用單個<ul>做出一個兩欄導航欄有六個<li>項目：一邊使用CSS和單個列表進行簡單的2列導航？

<nav> 
    <ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Team</li>  
    <li>Store</li> 
    <li>Blog</li> 
    <li>Contact</li> 
    </ul> 
</nav>

三要素和三個另一方面;垂直排列。

現在，在製作兩個獨立的<ul>元素並在它們之間放置填充/頁邊距時很容易：http://jsfiddle.net/Baumr/SJcjN/ - 但這不是一個好的解決方案。

還可以將<span>標籤圍繞每個集合的三個<li>的 - 但這是唯一的CSS解決方案嗎？

尋找一些優雅的想法。謝謝！

來源

2012-10-27 Baumr

<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Team</li>  
    <li>Store</li> 
    <li>Blog</li> 
    <li>Contact</li> 
</ul>

CSS：

li { 
    width: 50%; 
    float: left; 
    padding: 5px 0; 
}

他們會爲了這樣的：

Home About 
Team Store 
Blog Contact

如果這不是一個問題，你有一個非常簡單的解決方案。

編輯：

li:nth-child(even) { 
    width: 50%; 
    float: right; 
} 
li:nth-child(odd) { 
    width: 50%; 
    float: left; 
}

這會以正確的方式進行訂購。不確定IE將如何行動，但可以在所有其他瀏覽器上運行。

，或者你可以按照嚴格的UL-LI概念，所以你的HTML看起來是這樣的，因爲你需要，你可以有很多列：

<nav> 
    <ul class="menuitem"> 
     <li class="column"> 
      <ul>    
      <li>Home</li> 
      <li>About</li> 
      <li>Team</li> 
      </ul> 
     </li> 
     <li class="column"> 
      <ul>    
      <li>Store</li> 
      <li>Blog</li> 
      <li>Contact</li> 
      </ul> 
     </li>    
    </ul> 

    <ul class="menuitem"> 
     <li class="column"> 
      ..... 
     </li> 
    </ul>  

</nav>

作出正確和良好格式化的HTML可以讓你的生活更輕鬆。

來源

2012-10-27 22:52:29 Reflective

謝謝，但是，這是一個問題 - 在這種情況下，我可以對它們進行重新排序，但是這樣會響應：當它擴大時順序會不同/不好。 – Baumr

查看我的編輯另一個簡單的解決方案:) – Reflective

獲得創意？尼斯。謝謝！也可以用''來做到這一點，然後才能確定它在IE中工作...？ – Baumr

-1

我認爲使用<span>可能是最具跨瀏覽器友好的解決方案。

除非有人有其他想法嗎？尋找跨瀏覽器兼容的東西，可悲的是IE不支持nth-child(N)。

這是不是乾淨（HTML明智），我想，這些隨機的跨度，但這裏是HTML：

<nav> 
<ul> 
<span> 
<li>Home</li> 
<li>About</li> 
<li>Team</li> 
</span><span> 
<li>Store</li> 
<li>Blog</li> 
<li>Contact</li> 
</span> 
</ul> 
</nav>

（注意ul內span - 在我的書大失禮。）

而CSS：

nav span { 
    width: 50%; 
    float: left; 
}

但是，幾乎沒有一個很好的解決辦法...任何其他的想法？

來源

2012-10-27 23:47:09 Baumr

使用CSS和單個列表進行簡單的2列導航？

回答

相關問題