均匀分布的列表项

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

我根据这个帖子中的三十点的回答...

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: right 最后一个。

Answer 3

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