Question

我有几个阻止我希望并排创建菜单的元素。每个的宽度设置为自动以容纳内部文本。每个元素都显示为表格单元格，可以使用绝对或相对定位。

感谢您的帮助。麦克

Answer 1

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

ul#navigation li {
    float: left;
}

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

Answer 2

显示：内联块

Answer 3

这是an almost similar scenario，您可以考虑将其用于创建菜单。

Answer 4

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

HTML：
  ＆lt; ul id =“navigation”＆gt;
  ＆lt; li＆gt;＆lt; a href =“/ some-link.html”＆gt;某些链接＆lt; / a＆gt;＆lt; / li＆gt;

  ＆lt; li＆gt;＆lt; a href =“/ some-link2.html”＆gt;某些链接2＆lt; / a＆gt;＆lt; / li＆gt;

  ＆lt; li＆gt;＆lt; a href =“/ some-link3.html”＆gt;一些链接三＆lt; / a＆gt;＆lt; / li＆gt;
  ＆LT; / UL＆GT;

CSS：
  #navigation {
  宽度：550px;
  余量：0;
  填充：0;
  列表样式类型：无;
  溢出：隐藏;
  }
  #navigation li {
  浮动：左;
  }

#navigation li a，＃navigation li a：hover {
  显示：块;
  填充：4px 21px 4px 20px;
  文字修饰：无;
  }

Answer 5

如上所述，内联块是可行的方法。这篇mozilla文章将有助于它在所有浏览器中运行。

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

如何将块元素排成一行？

5 个答案: