是否可以僅使用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/