间隔均匀的列表项

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在这个帖子中的答案...

流体宽度等间距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:左边第一个列表项,text-align:右边最后一个.