Question

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

似乎只需在div周围包装一个项目，它就会自动导致每个菜单项都在一个新行上。

Answer 1

div是默认的块元素。您可以在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>

Answer 2

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

You probably want to use a <SPAN>

Answer 3

<span>正是您要找的

特别是对于菜单，您可以查看suckerfish dropdown menus

Answer 4

display: inline;

Answer 5

你可以让它们浮动，但对于菜单项，它远远是more common to use lists to create these。

Answer 6

＆LT; DIV＆GT;是display：block - 通常它会在你的内容周围形成一个盒子区域，你会得到类似于它后面的换行符（尽管它不是一个换行符，确切地说，因为'div'和'line'不是一起出现的概念）。＆LT;跨度＆GT; display：inline，表示其内容在段落中流动（即包装），如粗体或斜体突出显示。它甚至不总是采用盒子形状：想象

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

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

您可能希望对菜单使用块元素，因为框大小使得菜单元素的高度（以及可选的宽度）更加简单 - 内联元素可以为您提供可变的高度和宽度 - 大大简化了情况。

使用块元素，使用float：left使它们在水平方向上彼此相邻排列。

但是有很多并发症和意见，你最好更彻底地研究这种情况 - 我建议http://www.alistapart.com/为初学者，它有几个有用的菜单例子。

Answer 7

如果您使用span，则无法使用上边距和下边距，并且您的菜单项将分割为多行（如果它们也有边框则非常难看）。我推荐使用浮动块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>

Answer 8

是的，通常会这样。试试＆lt; span＆gt;

<div>会导致换行吗？</div>

8 个答案: