Question

我有以下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”，但没有成功。

有什么建议吗？

另外，请尝试考虑我尽量使其成为“跨浏览器兼容”。

提前致谢。

Answer 1

和其他人一样，我很难理解你正在寻找的东西但是这样做你想要的吗？

<!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上的白色空间：nowrap会停止任何自动换行和显示：LI上的内联块允许它们一个接一个地运行，但是在它们上面设置了宽度，填充和边距。对于符合标准的浏览器来说已经足够了。

然而IE6和IE7需要特殊处理。它们不支持显示：内联块正确，但幸运的是显示：带有hasLayout set的内联元素给出的行为非常像display：inline-block。宽度：100％已经强制在LI上设置hasLayout，因此我们所要做的就是指示显示：仅内联到IE6和IE7。有很多方法可以做到这一点（条件评论在StackOverflow上很流行）但是在这里我选择了* html和*：first-child + html hacks来完成这项工作。

此外，IE6和IE7还有另一个错误，滚动条覆盖内容，因此容器有一个填充底部为滚动条腾出空间。滚动条是一个平台控件，因此无法准确知道其高度，但在大多数情况下，17像素似乎都有效。

最后，IE7还想放入一个垂直滚动条，因此针对IE7的overflow-y：hidden会阻止这种情况发生。

（填充：0，边距：0，列表样式：无，个别LI上的样式就是为了更清楚地显示正在发生的事情。）

Answer 2

你希望它像一个好的旧式桌子：

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

}

Answer 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;来实现你想要的，但它是一种黑客攻击（不兼容跨浏览器）。

Answer 4

使用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。

Answer 5

试试这个

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

Answer 6

一般来说，要水平显示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>

Answer 7

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

即使你可以，它也会增长，因为被告知它是100％的父元素。为浏览器排序鸡和蛋的问题。

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

如何以100％宽度显示内联几个<li>？</li>

7 个答案: