CSS中<li>的覆盖行为？</li>

Question

HTML5，CSS。

我在<li></li>

中列出了一系列<ul>项

而不是每个人都在一个单独的行上（是的，传统的行为..）有没有办法使它们彼此相邻排列？

这样：

Adam
Eve
Tom
Jasmine

变为：

Adam  Eve  Tom  Jasmine

Answer 1

这个CSS会这样做：

li {display: inline;}

显然，CSS标识符的范围不适用于所有li标记，而只适用于您的特定区域。然后，您可以在li标签上使用边距或填充来控制水平间距。

您可以在此处看到它：http://jsfiddle.net/jfriend00/GJqy6/

更完整的例子：

HTML：

<ul id="navbar">
    <li>Adam</li>
    <li>Eve</li>
    <li>Tom</li>
    <li>Jasmine</li>
</ul>

CSS：

#navbar li {display: inline; padding: 0 10px;}

显示器：

Adam   Eve   Tom   Jasmine

这种结构非常常用于网页顶部的导航栏（在这种情况下，LI标签内部是<a>标签。

Answer 2

是

 li { float: left; }

这在菜单项中非常常用。