间隔均匀的列表项

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&amp;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;
}

我基于thirtydot在这个帖子中的答案......

Fluid width with equally spaced DIVs

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：左边第一个列表项，text-align：右边最后一个。

Answer 3

我认为这不需要列表。你不能只用text-align: justify在

中创建一系列单词吗？