均勻分佈的列表項

我一直在負責生成看起來像這樣一個水平導航列表：均勻分佈的列表項

enter image description here

點是該項目需要從絕對左側被單獨隔開，以正確的。

設置寬度是一種痛苦，因爲不同的瀏覽器似乎不同地解釋它們。此外，此列表中的項目數量將根據用戶而改變。

任何意見將不勝感激！

以下@Dean的建議，我發現自己與下面 - 這是非常正確的。我唯一想到的是左邊的兩個元素不幸很短，因此差距很大。我希望客戶對文本對齊感到滿意;以側面填充爲主的所有元素爲中心！

enter image description here

來源

2011-10-04 Cordial

爲UL寬度固定的嗎？ –

是的，它可以是... – Cordial

我做了一個菜單的jsFiddle ......所有東西都是完全間隔的，動態的，它一路走到左邊/右邊沒有JavaScript或怪異/醜陋的HTML語義問題。（它應該在IE 6中工作，如果它很重要。）

http://jsfiddle.net/bXKFA/2/

jpg demo

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的答案...

Fluid width with equally spaced DIVs

來源

2011-10-04 15:06:09 Sparky

這太棒了 - 謝謝！ – Cordial

很高興我可以幫助...但不要忘記[thirtydot的原始答案]（http：// stackoverflow。com/questions/6865194/fluid-width-with-equal-spaced-divs）是這個的基礎。 – Sparky

在IE7及以下版本中，這個失敗相當可怕... –

我不認爲這需要一個列表。難道你不能只用text-align: justify在div中創建一系列文字嗎？

來源

2011-10-04 11:33:13 cwallenpoole

是的我在想這個 - 使用非空格的導航元素與空格，但它不是很具有代表性的語義。如果我找不到一種方法來設計一個列表，那麼我會採用這種方式！ – Cordial

如果文字比較小，則不起作用：http://jsfiddle.net/hYxvj/ –

您將無法獲得在IE6這個工作很好，但你可以使用這個對所有主流瀏覽器：

ul { 
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */ 
} 
li { display: table-cell; text-align: center; }

對於IE6（可能是7），就需要使用Javascript功能來計算寬度動態。

另外不要忘記文本對齊：留下你的第一個列表項目，和文本對齊：最後一個。

來源

2011-10-04 12:23:29 Dean

除了我使用table-layout：auto之外，上述內容都適用於我： –

均勻分佈的列表項

回答

相關問題