如何将 UL 列表样式设置为单行

我想在一行中呈现这个列表。

  • 清单项目1
  • 清单第二项

应显示为

* 清单项目2 * 清单项目2

使用什么样的 CSS 样式？

426370 次浏览
小开
最佳答案 
ul li{
display: inline;
}

有关更多信息，请参阅 基本列表选项和 基本的水平列表在 listamatic。(感谢下面的 丹尼尔 · 斯特莱特的链接)。

另外，正如在评论中指出的那样，您可能需要在 ul 上设计样式，以及在 li 和 li 本身内部的任何元素，以使事物看起来更好。

小开

HTML 代码:

<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

CSS 代码:

ul.list li{
width: auto;
float: left;
}
小开

在现代浏览器中，您可以执行以下操作(与 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>

小开

也试试这样做:

超文本标示语言

 <ul class="inlineList">
<li>She</li>
<li>Needs</li>
<li>More Padding, Captain!</li>
</ul>

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;
}
*/

我做了一个代码来说明: http://codepen.io/agm1984/pen/mOxaEM

小开

在 鞋带中使用 .list-inline css 类

<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

档号: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h


提交答案