Question

我正在构建一个导航栏，我正在为每个链接创建一个单独的div标签，因此我可以指定它们的margin-left因为它是一个水平条。

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

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

打印：

HOME
ABOUT
MUSIC
CONTACT

然而，当我删除它时，它打印

HOME ABOUT MUSIC CONTACT

我如何保持水平，但仍然设计风格。非常感谢

Answer 1

您正在寻找的是：

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

.nav_button {
    display: inline;
}

在你的HTML中：

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

默认为display: block;

为Brian Rose编辑，以便它在样式表中，而不是按照我的简单示例内联。

Answer 2

只需将<div>更改为<span>的工作吗？

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

Answer 3

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

Answer 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元素来删除这些点。

Answer 5

您可以随时添加一些CSS：

float: left
width: xxx

对于每个DIV或班级。

Answer 6

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

Answer 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>

Answer 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应该一样容易。

为每个Div标记添加新行

8 个答案: