HTML – 如何显示内联几个> 100％宽度？

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

有什么建议么？

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

提前致谢.

解决方法

和其他人一样,我很难理解你正在寻找什么,但这样做你想做什么？

<!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上的样式只是为了更清楚地显示正在发生的事情.)

原文地址：https://www.jb51.cc/html/227991.html

HTML – 如何显示内联几个> 100％宽度？

解决方法

相关推荐