html - 均匀分布的列表项

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

我基于 thirddot 在这个线程中的回答......

Fluid width with equally spaced DIVs