logo标签列表

如何使<li>元素从左到右流动而不是从上到下？

htmlcss
18

这里是我的<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元素之间的间距和其背景颜色，以及a元素与li元素边框之间的间距？

8个回答
22

我认为你正在寻找

li {
  display:inline;
}
顺便问一下，如何调整每个<li>元素之间的间距？ - omg
1
@Shore — 如果你想控制间距，最好使用 display: inline-block，这样可以在内联元素上使用 margin 和 width 等属性。 - Ben Blank
哦，看起来IE不支持 display: inline-block。 - omg
1
不过，IE会将display: inline视为display: inline-block，因此您可以使用条件注释来更改IE看到的内容以获得相同的效果。更严重的问题是FF2的缺失，这也可以解决，但只能使用非验证CSS。或者，您可以切换到float解决方案，并将这些大小和位置问题交换为标准浮动问题，这可以在<ul>上大量解决overflow: auto。 - Ben Blank
尽管它在Firefox上对我有用，但在Google Chrome上却不行！ - Laggel
7

有几种方法。

一种方法是像其他帖子提到的那样使用display:inline

另一种方法是float:left;

编辑：更详细的说明！在页面中尝试这个

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

尝试：

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

样式应该放在外部样式表中，我只是为了简单起见将它们放在页面上。
哦，它可以工作，但你能解释一下为什么将li的display属性改为inline会隐藏UL的项目符号吗？ - omg
3
列表项目只有在 display: list-item 的元素上才会显示符号，而 <li> 元素默认为此属性。一旦您将它们更改为 display: inline，浏览器就不再将其视为列表元素并删除符号。编号列表也是如此。 - Ben Blank
4
您可以使用浮动属性（float attribute）：
.nav ul li{float:left;}
浮点数容易出问题，我认为display:inline更好。 - omg
您可能还需要设置.nav ul { overflow: auto; }以避免一些浮动元素的潜在问题。 - Ben Blank
@Shore - 我个人更喜欢使用 display: inline，但两者都有其适用的场合。正如你在其他地方所指出的那样，更改 display 属性会阻止列表符号/编号的显示，还有其他一些微妙的差异。 - Ben Blank
@Shore - 浮动可能是最好的选择，因为这样元素就成为了块级元素，这意味着您可以更好地控制它们的样式。 - Matthew James Taylor
1
.nav li  { display: inline }

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

1

只是想让你知道，当你将列表项向左浮动时，IE会进行“步进”处理，我认为IE是唯一这样做的浏览器，其他所有浏览器都会直接继续。要使列表项直接横跨，请在CSS中使用“display：inline”而不是“float：left”，这样应该可以在所有浏览器中正常工作。有关更详细的说明，请查看此快速教程。

0
你可以使用 display: inline，像这样：
li{
    display: inline;
}

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

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

然后像这样设置样式：

.horizontal{
    display: inline;
}
0
回答编辑后的问题：
li {
    float: left;
    display: block;
    padding: 4px 12px;   /* example spacing */
    margin: 0px 4px;     /* example margin */
}

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

li {
    float: left;
    margin: 0px 4px;     /* example margin */
}
li a {
    display: block;
    padding: 4px 12px;   /* example spacing */
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接