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 灵活框布局的简单解决方案：

样式

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>

结果

Answer 2

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

http://jsfiddle.net/5SFG5 /

Answer 3

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

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

你可以做这样的事情：

var width = 0, maxwidth = 900;
$('#nav li').each(function(){
  width += $(this).width();
});
var count = 2 * $('#nav').size();
var margin = (maxwidth - width) / count;
$('#nav li').css({
  marginLeft: margin + 'px',
  marginRight: margin + 'px'
});

抱歉，代码很乱，我有点着急：D。不管怎样，你所做的基本上是：检查 li 元素占用的总宽度，检查未占用的宽度并用 li 边距填充它。

Answer 4

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

这是一个开始..

CSS

#nav { width: 100%; display: inline; }
#nav ul li {
                display: block;
                float: left;
                margin: 2%;
                width: 10%;
            }

 #nav ul li a {margin: 0 auto; display: block;}

html

<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>