如何将UL列表设置为单行

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

• 列表item1
• 列表item2

应该显示为

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

什么样的CSS风格使用？

Answer 1

ul li{ display: inline; } 

欲了解更多信息，请参阅listamatic的基本列表选项和一个基本的水平列表 。 （感谢Daniel Straight下面的链接）。

另外，正如在评论中指出的那样，你可能想要在ul上创build样式，而且里面的任何元素都可以进入里面，li自己也可以让事情看起来很好看。

Answer 2

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

Answer 3

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

Answer 4

尝试尝试这样的事情也是：

HTML

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

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

Answer 5

任何显示的原因：内联不起作用？ 我已经习惯了工作，我不是一个初学者，只是显示：当其他事情做某事时，内联什么都不做。 我甚至删除了一切，只是为了确保没有任何影响，但不pipe是什么，不工作…

实际上，上面贴着显示器的flex先生是flex工作的…那很奇怪…