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

Question

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

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

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

这 （或多或少）应该是布局。 或多或少是因为我尚未计算成对链接的每个块的最大长度之间的实际距离。 假设每个块还剩20像素。

如您所见，链接块之间的距离（有1px边框）因容器而异（因此，每对链接的长度）。 我不能在li的ul里面使用不同的元素，这是主要问题。

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

任何输入都很好...

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/