问题描述
我希望通过使用单个 <ul> 和六个 <li> 项来制作一个两列导航栏:
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>?
一侧三个元素,另一侧三个元素;垂直排列.
Three elements on one side, and three on the other; ordered vertically.
现在,制作两个单独的 <ul> 元素并在它们之间放置填充/边距很容易:http://jsfiddle.net/Baumr/SJcjN/ — 但这不是一个很好的解决方案.
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> 标签包裹在每组三个 <li> 周围——但这是唯一的 CSS 解决方案吗?
Could also wrap <span> tags around each set of three <li>'s — but is that the only CSS solution?
寻找一些优雅的想法.谢谢!
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; }
他们会这样订购:
Home About Team Store Blog Contact
如果这不是问题,您有一个非常简单的解决方案.
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; }
这将以正确的方式对它们进行排序.不确定 IE 会如何运作,但可以在所有其他浏览器中运行.
This will order them in the correct way. not sure how IE will act, but will work in all other browsers.
或者您可以严格遵循 UL-LI 概念,因此您的 html 将如下所示,并且您可以拥有任意数量的列:
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.