<div>会导致换行吗？

Question

我有一个菜单栏，我想为每个菜单项创建一个div，使它们水平分开5px。 我该怎么做？

似乎只需将菜单项包裹在div中，就会自动导致每个菜单项进入新行。

- alamodey

Answer 1

元素默认为块级元素。您可以在CSS中更改它。

 display:inline

但是你最好使用列表和CSS来实现你想要的效果。

<style>
   .mymenu{
      list-style:none; 
   }
   .mymenu li{
      display:inline;
      etc
   }
</style>
<ul class="mymenu">
    <li>Item</li>
    <li>Item</li>
</ul>

- Vincent Ramdhanie

---

+1 总是喜欢使用 <ul> 来制作菜单，即使样式不适用时它们看起来也很好。 - kender

大多数JavaScript库/插件和jQuery使用此方法来创建菜单。 - ATorras

Answer 2

默认情况下，<DIV>会导致换行。

你可能需要使用<SPAN>。

- David Webb

Answer 3

<span> 是你需要的标签

特别是对于菜单，你可以看看 Suckerfish 下拉菜单

- Xn0vv3r

Answer 4

您可以让它们浮动，但对于菜单项来说，使用列表来创建它们更为常见。这个链接展示了如何创建居中的菜单列表。

- cgp

Answer 5

display: inline;

- Sake

Answer 6

<div> 的 display 属性为 block，通常它会在你的内容周围形成一个框区域，并且你会在它后面得到类似于换行的东西（虽然它不是换行，因为“div”和“line”不是一起使用的概念）。<span> 的 display 属性为 inline，这意味着它的内容会在段落中流动（即被包裹），就像加粗或斜体突出一样。它甚至不总是采用框形状：想象一下

This is a paragraph and <span> this is a
highlighted section.</span>

需要两个框来描述跨越的内联元素（设置边框以查看其外观）。

您可能希望对菜单使用块元素，因为框大小使得菜单元素的高度（和可选的宽度）更容易平衡 - 内联元素可能会导致变量高度和宽度 - 大大简化了情况。

对于块元素，请使用float：left使它们水平排列在一起。

但是有很多复杂性和意见，您最好更全面地研究这种情况 - 我建议从http://www.alistapart.com/开始，其中有几个已经工作的菜单示例。

- ijw

Answer 7

如果您使用标记，您将无法使用顶部和底部边距，您的菜单项将分成多行（如果它们还带有边框，则非常丑陋）。我建议使用浮动块A标签，它们紧凑且与文本模式浏览器很好地配合使用。

<style>
#menu a {display: block; border: 1px solid blue; padding 5px; float: left; margin-right: 5px;}
</style>
<div id="menu">
  <a href="/1/">Item 1</a> <a href="/2/">Item 2</a>
  <div style="clear:left"></div>
</div>

- SpliFF

Answer 8

是的，通常是这样的。尝试使用<span>

- pjc50