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