如何将UL列表样式化为一行

I want to render this list in a single line.

我想用一行来呈现这个列表。

List item1
item1列表
List item2
第二条列表

Should be shown as

应该显示为

*List item2 *List item2

第二条*列表第二条*列表

What CSS style to use?

使用什么CSS样式?

5 个解决方案

#1

143

ul li{
  display: inline;
}

For more see the basic list options and a basic horizontal list at listamatic. (thanks to Daniel Straight below for the links).

更多信息请参见listamatic中的基本列表选项和基本水平列表。感谢Daniel提供的链接。

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's和li's中加入任何元素，以使东西看起来更漂亮。

#2

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>

#3

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

#4

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

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

#5

Any reason that display:inline would not work? I've gotten styling to work and I'm not a beginner at all but display:inline does nothing when other things do something. I've even removed everything else just to be sure nothing was affecting it but no matter what, does not work...

显示:inline不会成功的原因是什么?我已经开始使用样式了，我不是一个初学者，但是显示:当其他事情做一些事情时，内联什么都不做。我甚至删除了所有其他的东西，只是为了确保没有任何东西影响到它，但无论如何，都不起作用……

Actually, the gentleman who posted above with display:flex was what worked... That's strange...

实际上，上面那位用display发布的男士说:flex就是有用的东西……这是奇怪的……

#1

143

ul li{
  display: inline;
}