CSS-让水平列表中的每个项目都有相等的可用填充空间

考虑一个简单的CSS布局，其中包含wrapper div定义了900像素左右的固定宽度，因此它内部的所有内容都扩展到100%宽度

在这里，我有一个导航div，包含1个UL和6个列表项，左浮动，以便它们水平显示在一行中

每个列表项应可变地增长，以精确地适应其文本内容，但每个项之间的间距应共享，以便整个菜单适合100%的空间，例如：

------------------------------------------------------
-N-        -N-          -N-               -N-      -N-
- -        - -          - -               - -      - -
- -ITEM1111- -ITEM222222- -ITEM33333333333- -ITEM44- -   
- -        - -          - -               - -      - -
------------------------------------------------------
<-------------------- 100% -------------------------->   

------------------------------------------------------
-N--N--N--N--N-
- -        - -          - -               - -      - -
--项目1111--222222--33333333--44--
- -        - -          - -               - -      - -
------------------------------------------------------

我希望这能说明问题！”N'为常数，但会相应地增长以适应100%的宽度（即，为了便于访问，有人会增加字体大小）

---

尽管我的目标不是javascript或图像，而是css纯度，但我很乐意接受其他建议。

问题是，当元素浮动时，其宽度会减小到内容的实际宽度。不过，您可以使用Javascript来玩弄它（我知道您要求的是无js版本，但我想不出其他选项）。在jQuery中，这应该相当容易。鉴于这种结构：

<ul id="nav">
  <li>ITEM1</li>
  <li>ITEM2</li>
  <li>ITEM3</li>
</ul>

---

对不起，代码太乱了，我有点赶时间：D.不管怎样，你要做的基本上是：检查

li

元素占用的总宽度，检查有多少未占用，并用

li

边距填充它。

我不确定N如何既可以是常数又可以是可变宽度

这是一个开始

CSS

html

如果IE6/IE7兼容性对您来说并不重要，那么使用display:table这个布局就很简单了

---

以下是我基于CSS3的简单解决方案：

风格

ul {
    padding: 0;
    width: 100%;
}

ul li {
    list-style: none;
    text-align: center;
    border: 1px solid Gray;
}

.flexmenu {
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

.flexmenu li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;

    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    flex-basis: auto;
}

HTML

<div style="width:900px">
    <ul class="flexmenu">
        <li>short</li>
        <li>looooooooooooooooooooooooooooooong</li>
        <li>short</li>
        <li>short</li>
    </ul>
</div>

短
呜呜呜呜呜呜呜呜呜呜
短
短

结果

---

N在所有列中都是常量。N=100%-（所有列的宽度）/列数+1（对于flexi-sexi），但问题表明列表项应尽可能宽。然后，900px留下的空间应平均分配，并用作每个项目之间的填充。因此，填充的宽度相同，ul宽度=900在我的示例中，第二个项目比其他项目大，正如您在图像上看到的，它需要尽可能多的空间，分别减少填充。我已经指定

宽度：400px这里只是一个例子。您可以将其更改为任何值，它都会起作用。@jenson button事件我已更新了答案，以精确地适应问题。您的评论和小提琴都无法解决填充问题。不确定您所说的“填充问题”是什么意思。如果你阅读原始问题，它是以宽度和间距而不是填充来表达的。你的LIs没有任何填充，OP将其作为问题的重点。我看不出有什么办法能让他们都分享你小提琴中可用的填充物。戈迪翁，读这个问题。单词padding只在标题中提到，用户希望LIs的间隔均匀。很难辨别OP中的“padding”是什么意思。LI padding有什么关系吗？如果不是，那么您可以考虑在问题标题中删除对填充的引用。
<div id="nav">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
         </ul>
</nav>

ul {
    padding: 0;
    width: 100%;
}

ul li {
    list-style: none;
    text-align: center;
    border: 1px solid Gray;
}

.flexmenu {
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

.flexmenu li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;

    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    flex-basis: auto;
}

<div style="width:900px">
    <ul class="flexmenu">
        <li>short</li>
        <li>looooooooooooooooooooooooooooooong</li>
        <li>short</li>
        <li>short</li>
    </ul>
</div>