Html 如何以 100% 的宽度显示内嵌多个 <li>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2434270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display inline several <li> with 100% width?
提问by Rui
I have the following html:
我有以下 html：
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
applied with a css as follows:
使用 css 应用如下：
#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }
So now I would like to have an indeterminate number of elements (<li>) all with 100% width (so they can adjust accordingly to the browser's window size) but all side by side, displaying the horizontal scroll bar in the container.
所以现在我想要一个不确定数量的元素 ( <li>)，所有元素都具有 100% 的宽度（因此它们可以根据浏览器的窗口大小进行相应调整），但全部并排，在容器中显示水平滚动条。
I have tried putting "display:inline" on ul's css, and "float:left" on li's css, but with no success.
我试过在 ul 的 css 上放置“display:inline”，在 li 的 css 上放置“float:left”，但没有成功。
Any suggestions?
有什么建议？
Also, try to consider I'm trying to make this as "cross-browser compatible" as possible.
另外，请尝试考虑我正在尝试使其尽可能“跨浏览器兼容”。
Thanks in advance.
提前致谢。
回答by Alohci
Like the others I'm struggling to understand what you're looking for exactly but does this do what you want?
像其他人一样，我正在努力了解您正在寻找什么，但这是否符合您的要求？
<!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>
Getting the LIs on to one line has two parts. The white-space:nowrap on the ul stops any automatic wrapping and the display:inline-block on the LIs allows them to run one after another, but have widths, paddings and margins set on them. For standards compliant browsers that's sufficient.
将 LI 放到一行上有两个部分。ul 上的 white-space:nowrap 停止任何自动换行，LI 上的 display:inline-block 允许它们一个接一个地运行，但在它们上设置了宽度、填充和边距。对于符合标准的浏览器，这就足够了。
However IE6 and IE7 need special treatment. They don't support the display:inline-block properly, but fortunately display:inline on elements with hasLayout set gives a behaviour very like display:inline-block. The width:100% has already forced hasLayout to be set on the LIs so all we have to do is to direct the display:inline to IE6 and IE7 only. There are a number of ways of doing this (conditional comments are popular on StackOverflow) but here I've chosen the * html and *:first-child+html hacks to do the job.
但是 IE6 和 IE7 需要特殊处理。他们不正确支持 display:inline-block，但幸运的是 display:inline 在具有 hasLayout 设置的元素上提供了非常类似于 display:inline-block 的行为。width:100% 已经强制在 LI 上设置 hasLayout，所以我们要做的就是将 display:inline 定向到 IE6 和 IE7。有很多方法可以做到这一点（条件注释在 StackOverflow 上很流行），但在这里我选择了 * html 和 *:first-child+html hacks 来完成这项工作。
Additionally, IE6 and IE7 have another bug where the scroll bar overlays the content, so the container is given a padding-bottom to make space for the scroll bar. The scroll bar is a platform control, so its height cannot be known exactly, but 17 pixels seems to work for most cases.
此外，IE6 和 IE7 有另一个错误，即滚动条覆盖了内容，因此容器被赋予了一个 padding-bottom 来为滚动条腾出空间。滚动条是平台控件，因此无法准确知道其高度，但 17 像素似乎适用于大多数情况。
Finally, IE7 also wants to put in a vertical scroll bar, so the overflow-y:hidden directed at IE7 stops this from happening.
最后，IE7 也想放一个垂直滚动条，所以针对 IE7 的溢出 y:hidden 阻止了这种情况的发生。
(The padding:0, margin:0, list-style:none, and the styles on the individual LIs are just there to show more clearly what's happening.)
（padding:0、margin:0、list-style:none 和各个 LI 上的样式只是为了更清楚地显示正在发生的事情。）
回答by Chris Sattinger
You want it to act like a good old fashioned table:
你想让它表现得像一张老式的桌子：
<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;
}
then you can also collapse it nicely when the page is small:
那么你也可以在页面很小的时候很好地折叠它：
/* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {
.menu, .menu li {
display: normal;
}
}
回答by Nawlbergs
using jquery to space your li's after your page has
使用 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">');
With the exception of the "childWidth" css... you can, of course, replace the other css with something from a style sheet.
除了“childWidth”css……当然，您可以用样式表中的某些内容替换其他 css。
回答by orokusaki
What you're trying to do resembles what table cells do and is impossible otherwise, without using JavaScript (I don't suggest using tables or JavaScript for this, however). Your best bet is to set a certain amount of horizontal padding on the <li>tags and float them so that they are auto-width based on their content's width instead of the window's width:
您尝试执行的操作类似于表格单元格所做的操作，否则如果不使用 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>
The other method is to use display: inline-block;to achieve what you want, but it's kind of a hack (not cross-browser compatible).
另一种方法是用来display: inline-block;实现你想要的，但它是一种黑客（不跨浏览器兼容）。
回答by jeroen
I think that what you want to do is not possible in cross-browser css and html; if you set the width of the lito 100%, you set it to the width of its parent element and what you really need is for the parent element (the ul) to have the width of all li's combined. And you cannot set the width to x-times the screen width using just css.
我认为你想做的事情在跨浏览器的css和html中是不可能的；如果将 的宽度设置li为 100%，则将其设置为其父元素的宽度，而您真正需要的是父元素 (the ul) 具有所有 li 的宽度组合。并且您不能仅使用 css 将宽度设置为屏幕宽度的 x 倍。
And even if you could, it would also grow the li's as the are told to be 100% of its parent element. Sort of a chicken and egg problem for the browser.
即使可以，它也会增长 li，因为 li 被告知是其父元素的 100%。浏览器的鸡和蛋问题。
In javascript is's easy though, just calculate the number of li's, set their width to the screen width and set the ulwidth to (the number of li's) x (screen width).
在javascript中虽然很简单，只需计算li的数量，将它们的宽度设置为屏幕宽度并将宽度设置ul为（li的数量）x（屏幕宽度）。
回答by Catfish
Try this
尝试这个
<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; }
回答by Randy Simon
Generally to show li's horizontally you would float them all left. The part that confuses me is the 100% width. How can each li have 100% width when they can only be as wide as their container? It seems like the li's need to be fixed width or autosized with no width at all.
通常要水平显示 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>
