問題描述

我希望通過使用單個(gè) <ul> 和六個(gè) <li> 項(xiàng)來制作一個(gè)兩列導(dǎo)航欄:

I am looking to make a two-column navigation bar by using a single <ul> with six <li> items:

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

一側(cè)三個(gè)元素，另一側(cè)三個(gè)元素；垂直排列.

Three elements on one side, and three on the other; ordered vertically.

現(xiàn)在，制作兩個(gè)單獨(dú)的 <ul> 元素并在它們之間放置填充/邊距很容易:http://jsfiddle.net/Baumr/SJcjN/ — 但這不是一個(gè)很好的解決方案.

Right now, it's easy to do when making two seperate <ul> elements and putting padding/margins between them: http://jsfiddle.net/Baumr/SJcjN/ — but that's not a great solution.

還可以將 <span> 標(biāo)簽包裹在每組三個(gè) <li> 周圍——但這是唯一的 CSS 解決方案嗎?

Could also wrap <span> tags around each set of three <li>'s — but is that the only CSS solution?

尋找一些優(yōu)雅的想法.謝謝！

Looking for some elegant ideas. Thank you!

推薦答案

<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; 
}

他們會(huì)這樣訂購:

Home About
Team Store
Blog Contact

如果這不是問題，您有一個(gè)非常簡(jiǎn)單的解決方案.

If that's not a problem, you have a very simple solution.

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

這將以正確的方式對(duì)它們進(jìn)行排序.不確定 IE 會(huì)如何運(yùn)作，但可以在所有其他瀏覽器中運(yùn)行.

This will order them in the correct way. not sure how IE will act, but will work in all other browsers.

或者您可以嚴(yán)格遵循 UL-LI 概念，因此您的 html 將如下所示，并且您可以擁有任意數(shù)量的列:

or you can follow strictly the UL-LI concept, so your html will look like this an you can have as many column as you need:

<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 可以讓您的生活更輕松.

Making a correct and well formated html can make your life easier.

這篇關(guān)于使用 CSS 和單個(gè)列表的簡(jiǎn)單 2 列導(dǎo)航?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！