如何让元素从左到右而不是从上到下流动？

Here are my <li> elements. I want them to appear left-to-right instead of top-to-bottom.

这是我的

元素。我希望它们从左到右而不是从上到下显示。

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

How can I do this?

我怎样才能做到这一点？

EDIT:how to control spacing between each li element and its bachground color and spacing between a element and border of li element?

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

8 个解决方案

#1

i think you are looking for

我想你在找

li {
  display:inline;
}

#2

There's a few ways.

有几种方法。

One way is display:inline as the other posts mention

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

Another way is float:left;

另一种方式是浮动：左;

edit: more detail! try this out in a page

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

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

#3

Try:

尝试：

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

The styles should really be in an external style sheet, I just put them on the page for simplicity.

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

#4

You could use the float attribute:

你可以使用float属性：

.nav ul li{float:left;}

#5

Just to let you know, that IE does a "step-down" thing when you float list items to the left, and I think that IE is the only browser to do that, all the others keep going straight. To have the list items goes straight across, use "display: inline" in your css instead of "float: left", this should work in all browsers this way. For more in dept explanation, check out this quick tutorial

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

#6

.nav li  { display: inline }

For further details and inspiration, have a look at Listamatic. They've got tons of excellent tutorials with step-by-step explanations and everything about margin, padding, and browser compatibility issues.

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

#7

To answer the question after the edit:

要在编辑后回答问题：

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

Edit: You might want to apply the padding and the display:block to the <a> element so that you can click on the padding as well:

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

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

#8

You could use display: inline, like this:

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

li{
    display: inline;
}

Or, if you have more lists, you could assign a class to that specific list:

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

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

And then style it like:

然后样式就像：

.horizontal{
    display: inline;
}

#1