是否可以只使用UL / LI和CSS制作此菜单？

Question

我想为我的网站制作菜单，我只需要UL和LI作为SEO。它应该看起来像：

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>   

每个李必须有1个链接。水平。 它必须是动态的：如果我更改链接的文本，它必须自动调整（因此理论上<li>上不应使用任何固定宽度。）

This（或多或少）是布局应该如何。或多或少，因为我没有计算对链接的每个块的最大长度之间的实际距离。比方说，每个街区剩下20 px。

正如您所看到的，由于容器（因此，每对链接的长度），链接块（具有1px边框）之间的距离是不同的。 我不能在ul li的{​​{1}}内使用不同的元素，这是主要问题。

知道这是否可行？我尝试了很多方法，但我真的不知道怎么能得到它（这是我不知道如何制作的第一个菜单）。

任何输入都会很好......

Answer 1

将此添加到您的CSS。

li { float: left; display: block; }

这是jQuery解决方案：http://jsfiddle.net/ADtke/5/

Answer 2

在支持的浏览器中有一种纯粹的CSS3方式（遗憾的是我们有这个混乱的-webkit，-moz）

ul { 
  border-left:2px solid #cc0;
  border-right:2px solid #cc0;
  -moz-column-count: 3;
  -moz-column-gap: 5px;
  -webkit-column-count: 3;
  -webkit-column-gap: 5px;
  column-count: 3;
  column-gap: 5px;
  -webkit-column-rule-color: #cc0;
  -webkit-column-rule-style: solid;
  -webkit-column-rule-width: 2px;
  -moz-column-rule-color: #cc0;
  -moz-column-rule-style: solid;
  -moz-column-rule-width: 2px;
  column-rule-color: #cc0;
  column-rule-style: solid;
  column-rule-width: 2px;
}
li {
  white-space:nowrap;
}

就像在这个jsfiddle http://jsfiddle.net/hyxxJ/5/

中一样