如何将块元素连续排列？答案

【问题标题】：How can I line block elements up in a row?如何将块元素连续排列？
【发布时间】：2009-07-14 06:44:08
【问题描述】：

我有几个要并排创建菜单的块元素。每个的宽度都设置为 auto 以适应里面的文本。每个 a 元素都显示为一个表格单元格，可以使用绝对定位或相对定位。

感谢您的帮助。迈克

【问题讨论】：

【解决方案1】：

如果您浮动块元素，它们将被放置在水平行中（动态宽度，除非您指定固定宽度。）

ul#navigation li {
    float: left;
}

查看此页面上导航的 HTML，例如（问题、标签、用户...）

【讨论】：

【解决方案2】：

显示：内联块

【讨论】：

请注意，inline-block 在当今市场上流行的某些浏览器中不受支持。

【解决方案3】：

这是an almost similar scenario，您可以考虑使用它来创建菜单。

【讨论】：

【解决方案4】：

我会使用display:inline-block 进行通用并排显示，但您正在尝试进行水平导航。我不会使用表格单元格显示，因为它很古怪，你最终不得不清理其他错误。

HTML：

#navigation{
  width:550px;
  margin:0;
  padding:0;
  list-style-type:none;
  overflow:hidden;
}
#navigation li{
  float:left;
}

#navigation li a,#navigation li a:hover{
  display:block;
  padding:4px 21px 4px 20px;
  text-decoration:none;
}

<ul id="navigation">
  <li ><a href="/some-link.html">Some link</a></li>
  <li ><a href="/some-link2.html">Some link 2</a></li>
  <li ><a href="/some-link3.html">Some link three</a></li>
</ul>

【讨论】：