問題描述

我的任務是生成一個如下所示的水平導航列表:

關鍵是項目需要從絕對左到右單獨間隔.

設置寬度很痛苦，因為不同的瀏覽器似乎對它們的解釋不同.此外，此列表中的項目數將根據用戶而變化.

任何建議將不勝感激！

遵循@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

這篇關于均勻分布的列表項的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！