Html 如何让 <li> 元素从左到右而不是从上到下流动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1039844/
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 can I make <li> elements flow left-to-right instead of top-to-bottom?
提问by omg
Here are my <li>elements. I want them to appear left-to-right instead of top-to-bottom.
这是我的<li>元素。我希望它们从左到右而不是从上到下出现。
<div class="nav">
<ul>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
</ul>
</div>
How can I do this?
我怎样才能做到这一点？
EDIT:how to control spacing between each li element and its bachground color and spacing between a element and border of li element?
编辑：如何控制每个 li 元素与其背景颜色之间的间距以及元素与 li 元素边框之间的间距？
回答by mkoryak
i think you are looking for
我想你正在寻找
li {
display:inline;
}
回答by bobobobo
There's a few ways.
有几种方法。
One way is display:inline as the other posts mention
一种方法是 display:inline 正如其他帖子提到的那样
Another way is float:left;
另一种方法是 float:left;
edit: more detail! try this out in a page
编辑：更多细节！在页面中试试这个
<style>
/* style 1 */
div.nav1 ul li
{
display:inline;
border: solid 1px black;
padding: 10px;
margin: 10px;
list-style-type: none;
line-height: 4em;
}
/* style 2 */
div.nav2 ul li
{
float: left;
border: solid 1px black;
padding: 10px;
margin: 10px;
list-style-type: none;
}
</style>
<h1>using display: inline;</h1>
<div class="nav1">
<ul>
<li><a href="#">inline</a></li>
<li><a href="#">inline blah bla</a></li>
<li><a href="#">i am not so neat on</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">wrapping and I probably</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">need a bit of work and tweaking</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">the "line-height" css property</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">to make me wrap better</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">also notice how i tend to break a line up into .. two. see? make your browser narrow.</a></li>
<li><a href="#">inline</a></li>
</ul>
</div>
<hr />
<h1>using float:left;</h1>
<div class="nav2">
<ul>
<li><a href="#">floated left</a></li>
<li><a href="#">i tend to behave</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">better for wrapping</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">when the list</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">reaches the edge of the page</a></li>
<li><a href="#">floated left</a></li>
</ul>
</div>
回答by RedFilter
Try:
尝试：
<style>
.nav li {display:inline;}
</style>
<div class="nav">
<ul>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
</ul>
</div>
The styles should really be in an external style sheet, I just put them on the page for simplicity.
样式确实应该在外部样式表中，为了简单起见，我只是将它们放在页面上。
回答by James Conigliaro
You could use the float attribute:
您可以使用 float 属性：
.nav ul li{float:left;}
回答by Robert DeBoer
Just to let you know, that IE does a "step-down" thing when you float list items to the left, and I think that IE is the only browser to do that, all the others keep going straight. To have the list items goes straight across, use "display: inline" in your css instead of "float: left", this should work in all browsers this way. For more in dept explanation, check out this quick tutorial
只是为了让您知道，当您将列表项向左浮动时，IE 会执行“降级”操作，我认为 IE 是唯一这样做的浏览器，所有其他浏览器都会继续前进。要让列表项直接穿过，请在 css 中使用“display: inline”而不是“float: left”，这应该在所有浏览器中都可以使用。有关部门的更多解释，请查看此快速教程
回答by ЯegDwight
.nav li { display: inline }
For further details and inspiration, have a look at Listamatic. They've got tons of excellent tutorials with step-by-step explanations and everything about margin, padding, and browser compatibility issues.
有关更多详细信息和灵感，请查看Listamatic。他们有大量出色的教程，其中包含分步说明以及有关边距、填充和浏览器兼容性问题的所有内容。
回答by jeroen
To answer the question after the edit:
编辑后回答问题：
li {
float: left;
display: block;
padding: 4px 12px; /* example spacing */
margin: 0px 4px; /* example margin */
}
Edit:You might want to apply the padding and the display:block to the <a> element so that you can click on the padding as well:
编辑：您可能希望将填充和显示：块应用于 <a> 元素，以便您也可以单击填充：
li {
float: left;
margin: 0px 4px; /* example margin */
}
li a {
display: block;
padding: 4px 12px; /* example spacing */
}
回答by Adrià
You could use display: inline, like this:
你可以使用display: inline，像这样：
li{
display: inline;
}
Or, if you have more lists, you could assign a class to that specific list:
或者，如果您有更多列表，您可以为该特定列表分配一个类：
<ul class="navbar horizontal">
<li>Test</li>
</ul>
And then style it like:
然后样式如下：
.horizontal{
display: inline;
}
