为每个 Div 标签添加新行答案

【问题标题】：Adding a new line for every Div tag为每个 Div 标签添加新行
【发布时间】：2011-12-10 22:54:34
【问题描述】：

我正在构建一个导航栏，并且我正在为每个链接制作一个单独的 div 标签，因此我可以指定它们的左侧边距，因为它是一个水平栏。

然而，当我添加 <div> 标签时，它会将下一个标签放在下一行：

<div>HOME</div>
<div>ABOUT</div>
<div>MUSIC</div>
<div>CONTACT</div>

打印出来的：

HOME
ABOUT
MUSIC
CONTACT

但是当我删除它们时，它会打印出来

HOME ABOUT MUSIC CONTACT

我怎样才能让它保持水平，但仍然可以设置它们的样式。非常感谢

【问题讨论】：

标签： css html

【解决方案1】：

您正在寻找的是：

在您的样式表中（例如 style.css）：

.nav_button {
    display: inline;
}

在您的 HTML 中：

<div class="nav_button">
   HOME
</div>

默认为display: block;

为 Brian Rose 编辑，使其位于样式表中，而不是按照我的快速示例内联。

【讨论】：

为什么不让它们跨越呢？
我不确定鼓励使用内联样式是件好事。这属于单独的样式表文件。
@Brian Rose：好吧.. 只为你

【解决方案2】：

是否会简单地将<div> 的工作更改为<span> 的工作？

否则，将style="float:left;" 添加到 div。

【讨论】：

您应该注意 Jakub 回答中的要点，尽管您的样式确实应该应用在单独的样式表中，并且正如 skajfes 在他的描述中所描述的那样，了解块元素和内联元素之间的区别。跨度>

【解决方案3】：

您可以随时尝试display: inline-block，而不是使用float: left。这应该有预期的效果:-)

【讨论】：

使用内联块的唯一原因是间距是否正确？我认为值得确定他想使用哪种风格。如果是颜色和文本装饰，则 inline-block 是矫枉过正的 IMO
就个人而言，我认为它是float 的更好替代品，因为float 在某些浏览器中有时会以不同的方式显示。它还避免了有时与 float 相关的问题。

【解决方案4】：

所以，div 是一个块元素，默认一个块元素占据容器的最大宽度。另一方面，Span 是一个内联元素。内联元素是堆叠的，很好 - 内联。内联元素不能定义边距、宽度或高度，而块元素可以。与 css 一样，您有多种选择：

您可以在 div 上使用float: left 将它们水平堆叠。请记住在末尾添加另一个元素并定义clear:left，以便它在浏览器中正确显示，并且父容器的高度会根据菜单项的高度显示。

第二个选项是使用display: inline-block，这将使div的堆栈水平，但允许您定义边距、宽度和高度。但是，这在 IE6/7 中不起作用，因此您必须为这些浏览器应用 display: inline。最简单的方法是 hack *display: inline，除了 IE6/7 之外的所有东西都会忽略它。

第三个选项是使用前两个选项之一，而不是 div 的使用 <ul>。您可以通过将list-style-type: none 应用于li 元素来移除这些点。

【讨论】：

【解决方案5】：

你总是可以添加一些 CSS：

float: left
width: xxx

对于每个 DIV 或在一个类中。

【讨论】：

【解决方案6】：

您想要<span> 标签，span 用于内联文本，其中 div 是块元素，这就是为什么它将所有内容都放在新行上的原因。见http://en.wikipedia.org/wiki/Span_and_div

【讨论】：

【解决方案7】：

我强烈建议使用无序列表 (ul) 进行导航。 div 非常适合较大的部分或框，但列表非常适合导航链接列表。

用你的例子来做：

CSS

 li { display: inline: padding: 4px 8px;}

html

<ul>
    <li>HOME</li>
    <li>ABOUT</li>
    <li>MUSIC</li>
    <li>CONTACT</li>
</ul>

如果它用于导航，你也会有一个标签：

html

  <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">MUSIC</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>

【讨论】：

【解决方案8】：

好的，出于好奇，您是否考虑过使用<li> 标签代替？
像这样的。

<style>
.nav{
width:20%;
background-color:gray;
list-style-type:none;
margin:0px;
padding:0px;
display:inline;
}
.nav li{
width:100%;
}
.nav li a{
background-color:silver;
color:white;
float:left;
padding:7px;
font-weight:bold;
text-decoration:none;
}

</style>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site Map</a></li>
</ul>

如果您有特定原因喜欢使用，请告诉我们，但我相信使用 div 应该同样简单。

【讨论】：