为每个Div标签添加一条新线

我正在构建一个导航栏，并且我为每个链接制作了一个分隔div标签，因此我可以指定它们的边距，因为它是一个单杠。为每个Div标签添加一条新线

然而，当我加入<div>标签它把下一行的下一个：

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

，打印：

HOME 
ABOUT 
MUSIC 
CONTACT

然而，当我删除它打印

HOME ABOUT MUSIC CONTACT

我怎样才能保持水平，但仍然风格。非常感谢

来源

2010-12-15 DonJuma

将简单地将<div>的<span>的工作？

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

来源

2010-12-15 21:11:14 tjm

像魅力一样工作 – DonJuma 2010-12-15 21:31:24

很高兴能有所帮助。 – tjm 2010-12-16 01:10:40

你应该注意到Jakub的答案，尽管你的风格应该在单独的样式表中应用，并且正如skajfes在他的描述中所描述的，理解块和内联元素之间的区别。 – tjm 2010-12-16 01:25:57

您正在寻找的是：

在样式表（style.css文件为例）：

.nav_button { 
    display: inline; 
}

而在你的HTML：

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

默认情况下，他们是display: block;

编辑表示Brian Rose，因此它是在样式表中，而不是按照我的快速示例内联。

来源

2010-12-15 21:12:40 Jakub

为什么不让他们跨越？ – tjm 2010-12-15 21:14:38

我不确定鼓励使用内联样式是件好事。这属于一个单独的样式表文件。 – 2010-12-15 21:16:22

@Brian Rose：好的..只为你 – Jakub 2010-12-15 21:18:01

您可以随时添加一些CSS：

float: left 
width: xxx

对于每一个DIV或一类。

来源

2010-12-15 21:13:02 Thyamine

而不是使用float: left你总是可以尝试display: inline-block。这应该会产生所需的效果:-)

来源

2010-12-15 21:13:08 Bojangles

使用内联块的唯一原因是间距正确吗？我认为值得确定他想使用哪种风格。如果是颜色和文字修饰，内联块就是过度杀伤IMO – dstarh 2010-12-15 21:17:17

就我个人而言，我认为这是'float'的一个更好的选择，因为'float'在某些浏览器中有时显示不同。它还可以解决有时与浮动相关的问题。 – Bojangles 2010-12-15 21:22:15

您想要<span>标签，跨度用于内联文本，其中div是块元素，因此它将所有内容放在新行中。请参阅http://en.wikipedia.org/wiki/Span_and_div

来源

2010-12-15 21:15:12 dstarh

我强烈建议使用无序列表（ul）进行导航。 Divs适用于较大的部分或箱子，但列表非常适合导航链接列表。

要与你的榜样这样做：

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>

来源

2010-12-15 21:23:05 Timbadu

OK，只是出于好奇，你有没有考虑过使用<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应该很容易。

来源

2010-12-15 21:25:29 sam

所以，div是一个块元素，默认情况下，一个块元素占用容器的最大宽度。另一方面跨度是内联元素。内联元素堆叠，内联。内联元素不能定义边距，宽度或高度，而块元素可以。与CSS一样，您有以下几种选择：

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

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

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

来源

2010-12-15 21:37:14 skajfes

为每个Div标签添加一条新线

回答

相关问题