均匀分布的列表项

Posted 2023-04-13

【中文标题】均匀分布的列表项

【英文标题】：Evenly spaced list items

【发布时间】：2011-11-30 14:58:22

【问题描述】：

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

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

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

任何建议将不胜感激！

---

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

【参考方案1】：

我为您的菜单制作了一个 jsFiddle... 一切都是完美间隔的、动态的，并且它一直到左/右边缘，没有 javascript 或奇怪/丑陋的 html 语义问题。 （如果重要的话，它应该在 IE 6 中工作。）

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;

我根据这个帖子中的三十点的回答...

Fluid width with equally spaced DIVs

【讨论】：

很高兴我能帮上忙...但不要忘记thirtydot's original answer 是这样做的基础。

@Mahdi.Montgomery，当我去年测试它时，它在 IE 6 和 7 中工作。但是，当 IE 6 和 7 的使用率如此之低且不断缩小时，我认为这不再重要了。

如果我统治世界，每个人都会使用 Chrome，而我的客户不会都使用 IE7。很难说服某人放弃对他们使用的浏览器的支持。

@Mahdi.Montgomery，在未来的某一天，您的客户将成为地球上最后一个 IE 7 用户，但是，cmets 部分不讨论这个问题...如果您有特定的您的代码在 IE 中无法运行的问题，只需将其作为新问题发布即可。

另一个想法：我在实际浏览器版本中验证了这个工作； 不在“IE 7 模式”下，不在模拟器中，也不在模拟器中。

【参考方案2】：

您将无法在 IE6 中正常运行，但您可以将其用于所有主要浏览器：

ul 
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */  

li  display: table-cell; text-align: center; 

对于 IE6（可能是 7），您需要使用 Javascript 来动态计算宽度。

也不要忘记 text-align: 离开你的第一个列表项， text-align: right 最后一个。

【讨论】：

以上对我有用，只是我使用了 table-layout: auto;

【参考方案3】：

我认为这不需要列表。你不能用text-align: justify在一个div中创建一系列单词吗？

【讨论】：

是的，我在想这个 - 使用不间断空格作为带有空格的导航元素，但它在语义上并不是很有代表性。如果我找不到设置列表样式的方法，那么我会求助于这个！

如果文本小于该行则不起作用：jsfiddle.net/hYxvj