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

【解决方案1】：

我想你正在寻找

li {
  display:inline;
}

【讨论】：

顺便说一句，如何调整每个
元素之间的间距？

@Shore — 如果你想控制间距，最好使用display: inline-block，这样你就可以在内联元素上使用margin 和width 等属性。跨度>

哦，看来display: inline-block IE 不支持。

否，但 IE 将 display: inline 视为 display: inline-block，因此您可以使用条件 cmets 来更改 IE 看到的内容，从而获得相同的效果。更严重的问题是 FF2 的缺失，可以再次解决，但只能使用非验证 CSS。或者，您可以切换到float 解决方案并将这些大小和位置问题换成标准浮动问题，这可以在<ul> 上使用overflow: auto 在很大程度上解决。

虽然它在 Firefox 中对我有用，但在 Google Chrome 中却没有！

【解决方案2】：

有几种方法。

一种方法是 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>

【讨论】：

【解决方案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>

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

【讨论】：

哦，它有效，但你能解释一下为什么改变 li display:inline 会隐藏 UL 的项目符号吗？
项目符号仅出现在带有display: list-item 的元素上，这是
元素的默认值。将它们更改为 display: inline 后，浏览器将不再将它们视为列表元素并删除项目符号。这同样适用于编号列表。

【解决方案4】：

你可以使用 float 属性：

.nav ul li{float:left;}

【讨论】：

float 容易出问题，我觉得 display:inline 比较好。
您可能还想设置.nav ul { overflow: auto; } 以避免浮动元素的一些潜在问题。
@Shore — 我自己通常更喜欢display: inline，但两者都有自己的位置。正如您在其他地方指出的那样，更改 display 会阻止列表项目符号/编号，并且还有其他细微差别。
@Shore - 浮动可能是最好的，因为元素是块，这意味着您可以更好地控制它们的样式。

【解决方案5】：

只是让您知道，当您将列表项浮动到左侧时，IE 会执行“降级”操作，我认为 IE 是唯一这样做的浏览器，所有其他浏览器都继续前进。要让列表项直接穿过，请在您的 css 中使用“display: inline”而不是“float:left”，这应该在所有浏览器中都以这种方式工作。更多详细解释，请查看quick tutorial

【讨论】：

【解决方案6】：

.nav li  { display: inline }

更多详情和灵感，请查看Listamatic。他们有大量优秀的教程，其中包含分步说明以及有关边距、填充和浏览器兼容性问题的所有内容。

【讨论】：

【解决方案7】：

编辑后回答问题：

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

编辑：您可能希望将填充和 display:block 应用到元素，以便您也可以点击填充：

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

【讨论】：

【解决方案8】：

你可以使用display: inline，像这样：

li{
    display: inline;
}

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

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

然后将其设置为：

.horizontal{
    display: inline;
}

【讨论】：