均匀分布的列表项

我一直在负责生成看起来像这样一个水平导航列表：均匀分布的列表项

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之外，上述内容都适用于我： –

均匀分布的列表项

回答

相关问题