如何将并排呈现?

I'm looking to create a navigation menu with list items rendered in one line. How do I do this?

我希望创建一个导航菜单，其中列表项在一行中呈现。我该怎么做呢?

7 个解决方案

#1

li {
    display: inline;
}

EDIT: I now realize why I felt strange answering with display: inline: because I usually use float: left myself instead, which is anthony-arnold's answer (so to him goes my upvote!).

编辑:我现在意识到为什么我觉得奇怪的回答是:内联:因为我通常使用float:让我自己代替，这是anthony-arnold的回答(所以对他来说是我的upvote!)

Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave differently. Depending on how you've styled your layout, you may have to choose one or the other.

无论如何，尽管这两种方法都将使lis显示在一行中，但是内联元素和浮动元素的行为是不同的。根据布局的样式，您可能需要选择其中之一。

#2

You could also do this, for some situations:

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

li {
    float: left;
}

#3

My favorite way to do it it's by using because it's allow do use width, height, margins and padding:

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

li { display: inline-block; }

But have some render problem in IE, to fix use (order is important):

但是在IE中有渲染问题，要修复使用(顺序很重要):

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

#4

One of the best resources on the subject is http://css.maxdesign.com.au/listamatic/ (a little outdated though).

这个主题最好的资源之一是http://css.maxdesign.com.au/listamatic/(虽然有点过时)。

They suggest both li {display: inline;} and li {float: left;} depending on the effect you want.

它们显示了li {display: inline;}和li {float: left;}取决于您想要的效果。

Look for example their "Simple horizontal list" http://css.maxdesign.com.au/listamatic/horizontal01.htm

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

#5

you will try this styling

您将尝试这种样式

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

it will work for u sure...

这对你肯定有效……

#6

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

#7

You could do:

你能做的:

li {
    float: left;
    display: inline;
}

If you want to maintain it's block characteristics but still need side-by-side, you could do:

如果你想保持它的块特征，但仍然需要并排，你可以做到:

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

#1

li {
    display: inline;
}