Html 如何并排渲染 <li>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2918606/
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 do I render <li> side-by-side?
提问by Upcyclist
I'm looking to create a navigation menu with list items rendered in one line. How do I do this?
我希望创建一个导航菜单，其中包含一行呈现的列表项。我该怎么做呢？
回答by BoltClock
li {
display: inline;
}
EDIT:I now realize why I felt strange answering with display: inline: because I usually use float: leftmyself instead, which is anthony-arnold's answer (so to him goes my upvote!).
编辑：我现在意识到为什么我觉得回答display: inline:很奇怪，因为我通常用float: left自己来代替，这是 anthony-arnold 的回答（所以我对他投了赞成票！）。
Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave differently. Depending on how you've styled your layout, you may have to choose one or the other.
无论如何，虽然任一方法都会导致您的lis 显示在一行中，但内联元素和浮动元素的行为确实不同。根据您设置布局样式的方式，您可能必须选择其中一种。
回答by Anthony
You could also do this, for some situations:
对于某些情况，您也可以这样做：
li {
float: left;
}
回答by Cesar
My favorite way to do it it's by using because it's allow do use width, height, margins and padding:
我最喜欢的方法是使用，因为它允许使用宽度、高度、边距和填充：
li { display: inline-block; }
But have some render problem in IE, to fix use (order is important):
但是在 IE 中有一些渲染问题，要修复使用（顺序很重要）：
li
{
display: inline-block;
zoom: 1;
*display: inline;
}
回答by Eelvex
One of the best resources on the subject is http://css.maxdesign.com.au/listamatic/(a little outdated though).
关于该主题的最佳资源之一是http://css.maxdesign.com.au/listamatic/（虽然有点过时）。
They suggest both li {display: inline;} and li {float: left;}depending on the effect you want.
他们建议两者li {display: inline;} 并li {float: left;}取决于您想要的效果。
Look for example their "Simple horizontal list" http://css.maxdesign.com.au/listamatic/horizontal01.htm
例如寻找他们的“简单水平列表” http://css.maxdesign.com.au/listamatic/horizontal01.htm
回答by joe
ul {display: inline;}
ul li { list-style: none;display: inline;}
回答by Subbu
you will try this styling
你会试试这个造型
li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}
it will work for u sure...
它肯定对你有用...
回答by Rafael Rodrigues
ul {
float: right; to <li> go to the Right or Left side
}
ul li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
If you use the "float:" in the "li", the list will invert the sequency.
如果在“li”中使用“float:”，则列表将反转顺序。
回答by Sarfraz
You could do:
你可以这样做：
li {
float: left;
display: inline;
}
If you want to maintain it's block characteristics but still need side-by-side, you could do:
如果你想保持它的块特性但仍然需要并排，你可以这样做：
li {
float: left;
display: inline-block;
}
