Html 如何使用html css强制列表垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6703228/
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 force a list to be vertical using html css
提问by kavita deshpande
I have a list i want to add to a <div>. Each listitem contains a <div>which in turn contain an image and a text string. The list must be vertical. I ve tried putting display:blockfor the <ul>with width:100%but the list is flowing left to right horizontally. How do I make the list vertical?
我有一个要添加到<div>. 每个列表项包含一个<div>，而后者又包含一个图像和一个文本字符串。该列表必须是垂直的。我已经试过把display:block对<ul>同width:100%，但名单是流左至右水平。如何使列表垂直？
回答by Paul
Try putting display: blockin the <li>tags instead of the <ul>
尝试把display: block在<li>标签代替<ul>
回答by Joe
I would add this to the LI's CSS
我会将此添加到 LI 的 CSS
.list-item
{
float: left;
clear: left;
}
回答by Sarath
Hope this is your structure:
希望这是你的结构：
<ul>
<li>
<div ><img.. /><p>text</p></div>
</li>
<li>
<div ><img.. /><p>text</p></div>
</li>
<li>
<div ><img.. /><p>text</p></div>
</li>
</ul>
By default, it will be add one after another row:
默认情况下，它将逐行添加：
-----
-----
-----
if you want to make it vertical , just add float left to li, give width and height, make sure that content will not break the width:
如果你想让它垂直，只需将浮动左添加到 li，给出宽度和高度，确保内容不会破坏宽度：
| | |
| | |
li
{
display:block;
float:left;
width:300px; // adjust
heigh:150px; // adjust
padding: 5px; //adjust
}
回答by Andreas L.
CSS
CSS
li {
display: inline-block;
}
Works for me also.
也适用于我。
