均匀分布的列表项

Question

我的任务是生成一个水平导航列表，如下所示：

要点是这些项目需要从绝对左到右单独间隔。

设置宽度是一件痛苦的事情，因为不同的浏览器对它们的解释似乎不同。此外，该列表中的项目数量将根据用户的不同而变化。

任何建议将不胜感激！

---

根据@Dean的建议，我发现自己有以下内容 - 这几乎是正确的。我唯一想到的是，不幸的是，左边的两个元素很短，因此差距很大。我希望客户会对文本对齐感到满意；以所有元素为中心，并在侧面添加一些填充！

Answer 1

我为你的菜单制作了一个 jsFiddle...一切都完美间隔、动态，并且它一直到左/右边缘，没有 JavaScript 或奇怪/丑陋的 HTML 语义问题。 （如果重要的话，它应该在 IE 6 中工作。）

http://jsfiddle.net/bXKFA/2 /

HTML:

<div id="menuwrapper">
    <div class="menuitem">CAREERS</div>
    <div class="menuitem">TRADE</div>
    <div class="menuitem">CONTACT US</div>
    <div class="menuitem">PRIVACY POLICY</div>
    <div class="menuitem">T&CS</div>
    <div class="menuitem">SITEMAP</div>
    <div class="menuitem">CORPORATE</div>
    <div class="menuitem">ACCESSIBILITY</div>
    <span class="stretcher"></span>
</div>

CSS:

#menuwrapper {
    height: auto;
    background: #000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.menuitem {
    width: auto;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    background: #000;
    color: yellow;
}

.stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

我基于它三十点在此线程中的答案...

具有等距 DIV 的流体宽度

Answer 2

您无法在 IE6 中很好地实现此功能，但您可以将其用于所有主要浏览器：

ul {
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */  
}
li { display: table-cell; text-align: center; }

对于 IE6（可能是 7），您将需要使用 Javascript 动态计算宽度。

另外，不要忘记将第一个列表项设置为 text-align: left，将最后一个列表项设置为 text-align: right。

Answer 3

我认为这不需要一个清单。难道您不能使用 text-align: justify 在 div 中创建一系列单词吗？