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>

结果