均匀间隔的列表项 [英] Evenly spaced list items

问题描述

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

I've been tasked with generating a horizontal nav list that looks like this:

这是因为项目需要从绝对左到右分开。

the point being that the items need to be individually spaced from absolute left to right.

设置宽度是一个痛苦，因为不同的浏览器似乎解释不同。此外，此列表中的项目数量将根据用户而有所不同。

Setting widths is a pain because different browsers appear to interpret them differently. Also, the number of items in this list will change depending on the user.

任何建议都将不胜感激。

Any advice would be appreciated!

按照@Dean建议，我发现自己与下面的 - 这是非常正确的。我唯一想到的是左边两个元素不幸的是短，因此很大的差距。我希望客户端将高兴与text-align;

Following @Dean advice, I've found myself with the below - which is pretty much correct. The only thing I'm thinking is that the left two elements are unfortunately short, hence the large gap. I'm hoping the client will be happy with text-align; center on all the elements with a touch of padding at the side!

推荐答案

我做了一个jsFiddle的菜单...一切都完美的间隔，动态，它一直到左/右边缘没有JavaScript或奇怪/丑陋的HTML语义问题。 （

I made a jsFiddle of your menu... everything is perfectly spaced, dynamic, and it goes all the way to the left/right edges without JavaScript or weird/ugly HTML semantic issues. (And it should work in IE 6, if it matters.)

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

我基于三十的答案在这个线程...

I based it on thirtydot's answer in this thread...

具有等间距DIV的流体宽度

这篇关于均匀间隔的列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！