我该怎么做 <li> 元素从左到右而不是从上到下流动？

Question

这是我的<li>元素。 我希望它们从左到右而不是从上到下显示。

<div class="nav">
  <ul>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
  </ul>
</div>

我怎样才能做到这一点？

编辑 ：如何控制每个li元素之间的间距及其bachground颜色和li元素的元素和边界之间的间距？

Answer 1

我想你在找

li {
  display:inline;
}

Answer 2

有几种方法。

一种方式是显示：内联其他帖子提到

另一种方式是浮动：左;

编辑：更详细！ 在页面中试试这个

<style>
/* style 1 */
div.nav1 ul li
{
  display:inline;

  border: solid 1px black;
  padding: 10px;
  margin: 10px;

  list-style-type: none;
  line-height: 4em;
}

/* style 2 */
div.nav2 ul li
{
  float: left;
  border: solid 1px black;
  padding: 10px;
  margin: 10px;

  list-style-type: none;
}
</style>

<h1>using display: inline;</h1>
<div class="nav1">
<ul>
<li><a href="#">inline</a></li>
<li><a href="#">inline blah bla</a></li>
<li><a href="#">i am not so neat on</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">wrapping and I probably</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">need a bit of work and tweaking</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">the "line-height" css property</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">to make me wrap better</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">also notice how i tend to break a line up into .. two.  see?  make your browser narrow.</a></li>
<li><a href="#">inline</a></li>
</ul>
</div>

<hr />

<h1>using float:left;</h1>
<div class="nav2">
<ul>
<li><a href="#">floated left</a></li>
<li><a href="#">i tend to behave</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">better for wrapping</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">when the list</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">reaches the edge of the page</a></li>
<li><a href="#">floated left</a></li>
</ul>
</div>

Answer 3

尝试：

<style>
.nav li {display:inline;}
</style>
<div class="nav">
        <ul>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
        </ul>
</div>

样式应该在外部样式表中，为了简单起见，我只是将它们放在页面上。

Answer 4

你可以使用float属性：

.nav ul li{float:left;}

Answer 5

只是为了让你知道，当你将列表项浮动到左边时，IE会做一个“降压”的事情，而且我认为IE是唯一能够做到这一点的浏览器，所有其他浏览器都是直截了当的。 要让列表项直接进行，请在css中使用“display：inline”而不是“float：left”，这应该适用于所有浏览器。 有关部门解释的更多信息，请查看此快速教程

Answer 6

.nav li  { display: inline }

有关详细信息和灵感，请查看Listamatic 。 他们有大量优秀的教程，包括逐步解释以及有关边距，填充和浏览器兼容性问题的所有内容。

Answer 7

要在编辑后回答问题：

li {
    float: left;
    display: block;
    padding: 4px 12px;   /* example spacing */
    margin: 0px 4px;     /* example margin */
}

编辑：您可能希望将填充和display：块应用于<a>元素，以便您也可以单击填充：

li {
    float: left;
    margin: 0px 4px;     /* example margin */
}
li a {
    display: block;
    padding: 4px 12px;   /* example spacing */
}

Answer 8

您可以使用display: inline ，如下所示：

li{
    display: inline;
}

或者，如果您有更多列表，则可以为该特定列表分配一个类：

<ul class="navbar horizontal">
    <li>Test</li>
</ul>

然后样式就像：

.horizontal{
    display: inline;
}