CSS - 让水平列表中的每个元素具有相等份额的可用填充

Question

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

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

每个列表项都应该可变地增长以完全适合其文本内容，但每个元素之间的间距应该共享，以便整个菜单适合 100% 的空间，例如:

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

我希望这是说明性的! “N”是常数，但相应地增长以适应 100% 的宽度(即为了可访问性——有人增加了字体大小)。

虽然我的目标不是 javascript 或图像，只是 css 纯度，但很高兴接受其他建议。

Answer 1

这是我基于 CSS3 的简单解决方案 Flexible Box Layout :

样式

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>

结果