如何并排渲染<li>？

Question

我正在寻找创建一个导航菜单,列表项目在一行中呈现.我该怎么做呢？

Answer 1

li {
    display: inline;
}

编辑:我现在意识到为什么我觉得奇怪的回答display: inline:因为我通常使用float: left自己,这是安东尼阿诺德的回答(所以对他来说是我的upvote!).

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

Answer 2

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

li {
    float: left;
}

Answer 3

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

li { display: inline-block; }

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

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