如何以 100% 的宽度显示内联几个 <li>？答案

【问题标题】：How to display inline several <li> with 100% width?如何以 100% 的宽度显示内联几个 <li>？
【发布时间】：2011-01-26 21:59:45
【问题描述】：

我有以下html：

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

应用css如下：

#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }

所以现在我希望有一个不确定数量的元素 (<li>)，它们都具有 100% 的宽度（因此它们可以根据浏览器的窗口大小进行相应调整），但是并排显示水平滚动条在容器。

我试过在ul的css上放“display:inline”，在li的css上放“float:left”，但没有成功。

有什么建议吗？

另外，请考虑一下我正在尝试使其尽可能“跨浏览器兼容”。

提前致谢。

【问题讨论】：

“100% 宽度”，我猜你的意思是每个 li 应该和它的文本一样宽，对吗？因为 'width: 100%' 会使每个 li 元素和 ul 一样宽，ul 和容器一样宽，我猜它和屏幕一样宽。
完全正确.. 想法是让 li 的宽度与屏幕一样宽 :P 垂直显示它们很容易（以该宽度），但我想让它们水平显示。

标签： html css horizontallist

【解决方案1】：

试试这个

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>


   #container { width:100%;  }
   #container ul { text-align:center; }
   #container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }

【讨论】：

这不起作用。 li 的宽度改为缩小到它的内容大小。
nop.. 它只是将两个元素并排居中，宽度受其内容大小加上 40 像素的填充限制。
我想我不明白你在找什么。

【解决方案2】：

通常，要水平显示 li，您会将它们全部浮动。让我困惑的部分是 100% 的宽度。当每个 li 只能和它们的容器一样宽时，它们怎么能有 100% 的宽度？似乎 li 需要固定宽度或完全没有宽度的自动调整大小。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        #container { width:100%; overflow:auto; }
        #container ul { width: 100%; }
        #container li { float:left; }
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li>element 1</li>
        <li>element 2</li>
      </ul>
    </div>
</body>
</html>

【讨论】：

如果你给每个 li 100% 它将填充父容器。所以如果ul是200px，li应该是200px。
好吧，我想我明白你想要什么，但我会这样做的方式是使用 JavaScript。这对你来说是一个选择吗？
你不应该用另一个问题来回答一个问题。

【解决方案3】：

您尝试执行的操作类似于表格单元格执行的操作，否则在不使用 JavaScript 的情况下是不可能的（不过，我不建议为此使用表格或 JavaScript）。最好的办法是在 <li> 标签上设置一定数量的水平填充并将它们浮动，以便它们根据内容的宽度而不是窗口的宽度自动调整宽度：

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

<style type="text/css">
#container, #container ul {
    width: 100%;
    float: left;
}

#container ul li {
    margin: 0 10px 0 0;
    padding: 5px 10px;
    float: left;
}
</style>

另一种方法是使用display: inline-block; 来实现您想要的，但这有点像黑客（不兼容跨浏览器）。

【讨论】：

【解决方案4】：

我认为你想做的事情在跨浏览器的css和html中是不可能的；如果将li 的宽度设置为 100%，则将其设置为其父元素的宽度，而您真正需要的是父元素（ul）具有所有 li 组合的宽度。而且您不能仅使用 css 将宽度设置为屏幕宽度的 x 倍。

即使你可以，它也会增加 li，因为 li 被告知是其父元素的 100%。浏览器的鸡和蛋问题。

在 javascript 中很简单，只需计算 li 的数量，将它们的宽度设置为屏幕宽度并将ul 宽度设置为（li 的数量）x（屏幕宽度）。

【讨论】：

【解决方案5】：

像其他人一样，我正在努力理解您正在寻找的确切内容，但这是否符合您的要求？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Horizontal 100% LIs</title>
    <style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; }  /* IE6 hack */
* html #container { padding-bottom:17px;}  /* IE6 hack  */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; }  /* IE7 hack  */
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
      </ul>
    </div>
</body>
</html>

将 LI 放在一行中包含两个部分。 ul 上的 white-space:nowrap 停止任何自动换行，LI 上的 display:inline-block 允许它们一个接一个地运行，但设置了宽度、填充和边距。对于符合标准的浏览器就足够了。

但是IE6和IE7需要特殊处理。他们不正确地支持 display:inline-block，但幸运的是 display:inline 在设置了 hasLayout 的元素上给出了非常类似于 display:inline-block 的行为。 width:100% 已经强制在 LI 上设置 hasLayout，所以我们要做的就是将 display:inline 定向到 IE6 和 IE7。有很多方法可以做到这一点（条件 cmets 在 StackOverflow 上很流行），但在这里我选择了 * html 和 *:first-child+html hacks 来完成这项工作。

此外，IE6 和 IE7 还存在另一个错误，即滚动条会覆盖内容，因此容器被赋予了一个 padding-bottom 来为滚动条腾出空间。滚动条是一个平台控件，所以它的高度无法准确知道，但 17 像素似乎适用于大多数情况。

最后，IE7 还想放入一个垂直滚动条，所以针对 IE7 的overflow-y:hidden 阻止了这种情况的发生。

（padding:0、margin:0、list-style:none 以及各个 LI 上的样式只是为了更清楚地显示正在发生的事情。）

【讨论】：

【解决方案6】：

在你的页面有后使用 jquery 来分隔你的 li

  var ul = $('#yourListId');
  var numChildren = ul.children().length;
  if(numChildren <= 0){
    return;
  }
  ul.css({'list-style':'none','margin':0,'padding':0});
  var parentWidth = ul.width();
  var childWidth = parentWidth/numChildren;
  ul.children().each(function(index, value){
    $(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'});
  });
  ul.after('<div style="clear:both">');

除了“childWidth” css...你当然可以用样式表中的东西替换其他 css。

【讨论】：

【解决方案7】：

你想让它表现得像一张好的老式桌子：

<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


.menu {
    display: table;
    width: 100%;
}
.menu li {
    display: table-cell;
    padding: 2px;

    background: #900990;
    border: 1px solid yellow;
    color: white;
}

那么你也可以在页面很小的时候很好地折叠它：

/* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}

【讨论】：