CSS 如何将 UL 列表样式设置为一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/976897/
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 style the UL list to a single line
提问by R.D
I want to render this list in a single line.
我想在一行中呈现这个列表。
- List item1
- List item2
- 列表 item1
- 列表 item2
Should be shown as
应显示为
*List item2 *List item2
*列表项2 *列表项2
What CSS style to use?
使用什么 CSS 样式？
回答by rz.
ul li{
display: inline;
}
For more see the basic list optionsand a basic horizontal listat listamatic. (thanks to Daniel Straightbelow for the links).
有关更多信息，请参阅listamatic 中的基本列表选项和基本水平列表。（感谢下面的Daniel Straight提供的链接）。
Also, as pointed out in the comments, you probably want styling on the ul and whatever elements go inside the li's and the li's themselves to get things to look nice.
此外，正如评论中指出的那样，您可能希望在 ul 上设置样式以及 li 和 li 内部的任何元素，以使事情看起来不错。
回答by davidlbaileysr
In modern browsers you can do the following (CSS3 compliant)
在现代浏览器中，您可以执行以下操作（符合 CSS3）
ul
{
display:flex;
list-style:none;
}<ul>
<li><a href="">Item1</a></li>
<li><a href="">Item2</a></li>
<li><a href="">Item3</a></li>
</ul>回答by adel aaji
HTML code:
HTML代码：
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS code:
CSS代码：
ul.list li{
width: auto;
float: left;
}
回答by agm1984
Try experimenting with something like this also:
也尝试尝试这样的事情：
HTML
HTML
<ul class="inlineList">
<li>She</li>
<li>Needs</li>
<li>More Padding, Captain!</li>
</ul>
CSS
CSS
.inlineList {
display: flex;
flex-direction: row;
/* Below sets up your display method: flex-start|flex-end|space-between|space-around */
justify-content: flex-start;
/* Below removes bullets and cleans white-space */
list-style: none;
padding: 0;
/* Bonus: forces no word-wrap */
white-space: nowrap;
}
/* Here, I got you started.
li {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
}
*/
I made a codepen to illustrate: http://codepen.io/agm1984/pen/mOxaEM
我做了一个codepen来说明：http://codepen.io/agm1984/pen/mOxaEM
回答by Matee Gojra
in bootstrapuse .list-inlinecss class
在引导程序中使用.list-inlinecss 类
<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h
参考：https: //www.w3schools.com/bootstrap/tryit.asp?filename =trybs_ref_txt_list-inline &stacked =h
