Question

我正在寻找创建一个导航菜单，其中列表项呈现在一行中。我该怎么做？

Answer 1

li {
    display: inline;
}

编辑：我现在意识到为什么我对display: inline回答感到奇怪：因为我通常会自己使用float: left，这是anthony-arnold的答案（所以对他说我的upvote！）。

无论如何，虽然任何一种方法都会导致li显示在一行中，但内联元素和浮动元素的行为却不同。根据您的布局样式，您可能必须选择其中一个。

Answer 2

在某些情况下，你也可以这样做：

li {
    float: left;
}

Answer 3

我最喜欢的方法是使用它，因为它允许使用宽度，高度，边距和填充：

li { display: inline-block; }

但在IE中有一些渲染问题，要修复使用（顺序很重要）：

li 
{ 
  display: inline-block; 
  zoom: 1;
  *display: inline;
}

Answer 4

关于这个主题的最佳资源之一是http://css.maxdesign.com.au/listamatic/（虽然有点过时）。

他们根据您想要的效果建议li {display: inline;} 和li {float: left;}。

查看他们的“简单水平列表”http://css.maxdesign.com.au/listamatic/horizontal01.htm

Answer 5

ul {display: inline;} 
ul li { list-style: none;display: inline;}

Answer 6

你会尝试这种造型

li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}

它肯定会起作用......

Answer 7

ul {
    float: right;  to <li> go to the Right or Left side
}

ul li {
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
}

如果在“ li”中使用“ float：”，则列表将颠倒顺序。

Answer 8

你可以这样做：

li {
    float: left;
    display: inline;
}

如果你想保持它的阻挡特性但仍然需要并排，你可以这样做：

li {
    float: left;
    display: inline-block;
}

Answer 9

你可以使用float: left;

ul li {
    float: left;
}

如何并排渲染<li>？</li>

9 个答案: