HTML 列表元素：将父宽度分成相等的部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6310632/
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
HTML List element : Sharing the parent width into equal parts
提问by Shyju
I have a parent <ol>and couple of <li>items in that.
我有一个父母<ol>和几个<li>项目。
<ol style='width=800px;display :block;float:left;'>
<li style='display :block;float:left;'> Item 1 </li>
<li style='display :block;float:left;'> Item 2 </li>
<li style='display :block;float:left;'> Item 3 </li>
<li style='display :block;float:left;'> Item 4 </li>
</ol>
Is there any way my list item can be arranged in a way where it will equally divide the parent width (800px), and each item will have the same amount of width? I.e. each <li>will take 200px width.
有没有什么办法可以排列我的列表项，使其等分父宽度（800px），并且每个项都具有相同的宽度？即每个<li>将需要 200px 宽度。
I don't want to hardcode the value. Is there any style attribute which will do that?
我不想对值进行硬编码。是否有任何样式属性可以做到这一点？
I dont want to hardocode the width like 20 % or something because the list items are dynamically added.it may be 4 or 5 or 6 sometimes
我不想将宽度硬编码为 20% 之类的东西，因为列表项是动态添加的。有时可能是 4、5 或 6
回答by thirtydot
Try this: http://jsfiddle.net/QzYAr/
试试这个：http: //jsfiddle.net/QzYAr/
- For details on
display: table-cell: Is there a disadvantage of using `display:table-cell`on divs? table-layout: fixedensuresequal widthlielements.
- 有关详细信息
display: table-cell：在 div 上使用 `display:table-cell` 是否有缺点？ table-layout: fixed确保等宽li元素。
CSS:
CSS：
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
HTML:
HTML：
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
回答by ngen
I think this is what you're asking for. It required jQuery though.
我想这就是你要问的。不过它需要jQuery。
CSS:
CSS：
ul {
width: 800px;
}
li {
display: inline-block;
float:left;
}
JS:
JS：
var evenWidth = $(".list").width()/$(".list li").size();
$(".list li").css("width", evenWidth);
HTML:
HTML：
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
回答by Dennis Flagg
Here is a minimalistic design. It will produce responsive equal distance cells
这是一个简约的设计。它将产生响应的等距细胞
<style>
div { border:1px solid red; width:400px; height:400px; }
ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>
<div>
<ul>
<li>CELL 1</li>
<li>CELL 2</li>
<li>CELL 3</li>
<li>CELL 4</li>
</ul>
</div>
The magic is width:1%; position:relative; display:table-cell;
神奇的是 width:1%; position:relative; display:table-cell;
回答by joakimdahlstrom
As Renesis pointed out, I think table cells is the only option, unless you're scripting it. Although you can use table-cell in CSS.
正如 Renesis 指出的那样，我认为表格单元格是唯一的选择，除非您正在编写它的脚本。尽管您可以在 CSS 中使用 table-cell。
#menu {display: table-row;}
#menu li {display: table-cell;}
..which will simulate the behaviour. Note that in IE it will, as usual, cause problems in the lower versions.
..这将模拟行为。请注意，在 IE 中，它会像往常一样在较低版本中引起问题。
回答by Nicole
Please note:The original poster edited their question to exclude percent after I posted this answer.
请注意：在我发布此答案后，原始海报编辑了他们的问题以排除百分比。
Yes, you simply need to figure out the percent that each will use. In this case, 20%.
是的，您只需要弄清楚每个人将使用的百分比。在这种情况下，20%。
Also, you have some slight problems with your HTML (missing quote and width=instead of the correct width:).
此外，您的 HTML 有一些小问题（缺少引号，width=而不是正确的width:）。
<style>
ol { width:800px;display :block;float:left; }
li { border:1px solid black; display :block;float:left; width:20%; }
</style>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
Update:
更新：
While you can get away without defining pixels by using a percentage, there is no way with block elements to get away without defining anywidth value (and width values are only valid as a unit or a percentage).
虽然您可以在不使用百分比定义像素的情况下逃脱，但块元素无法在不定义任何宽度值的情况下逃脱（并且宽度值仅作为单位或百分比有效）。
Not that I'm suggesting you use tables, but table cells are the only elements in HTML that sort of behave like what you are asking for.
并不是我建议您使用表格，而是表格单元格是 HTML 中唯一与您所要求的行为类似的元素。
