问题描述

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

关键是项目需要从绝对左到右单独间隔.

设置宽度很痛苦，因为不同的浏览器似乎对它们的解释不同.此外，此列表中的项目数将根据用户而变化.

任何建议将不胜感激！

遵循@Dean 的建议，我发现自己有以下问题——这非常正确.我唯一在想的是左边的两个元素很短，因此差距很大.我希望客户会对文本对齐感到满意；以所有元素为中心，侧面有一点填充！

我为你的菜单做了一个 jsFiddle... 一切都是完美间隔的，动态的，它一直到左/右边缘，没有 JavaScript 或奇怪/ugly HTML 语义问题.(如果重要的话，它应该在 IE 6 中工作.)

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!

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!

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...

Fluid width with equally spaced DIVs

这篇关于均匀分布的列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！