爲每個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標籤添加一條新線

回答

相關問題