為什么div不能串聯
[英]Why wont divs sit inline
問題描述
我閱讀了內聯定位：
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
然后我創建了一個測試頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
p {display:inline}
.inline
{
display:inline;
}
</style>
<div style="display:inline;">
<p>Hello</p>
<p>Pete</p>
</div>
<div class="inline">
<div>Hello</div>
<div>Pete</div>
</div>
<div class="inline">
<p>Hello</p>
<p>Pete</p>
</div>
</form>
但是，當我查看頁面時，中間的兩個div不是內聯的，它們是一個接一個的。
我不理解的是為什么第二個元素arent不能內聯顯示？ 我的意思是他們不應該根據這篇文章。 段落和Divs都是塊級的，那么為什么只有段落元素變為“內聯”？
任何幫助，不勝感激。
皮特
4 個解決方案
解決方案1
3 2010-11-08 17:01:26
您無視div的目的。 如果要使用內聯元素，則更好的選擇是使用<span>元素。
如果希望div並排顯示，則應使用float 。 例如float:left每個div float:left 。
解決方案2
3 已采納 2010-11-08 17:05:45
第二個div中的div沒有inline類，因此不是內聯元素。 如果將CSS定義更改為此：
div, p {display:inline}
然后，一切都將很好地融合在一起。
解決方案3
1 2010-11-08 17:24:22
<div>標記本質上是塊級元素。 除非您在CSS規則中特別聲明，否則它們將保持不變。
您在這里有兩個選擇。
編寫一個CSS規則，該規則將邊界div中的每個div與一個內聯類匹配。 例如
.inline div {display:inline}
但是我建議不要這樣做。
最好的選擇是內聯應用類，因為您已經編寫了要內聯顯示的每個div的信息。 例如
.inline {display:inline}
這種方法的好處是，您可以將此類應用於任何元素，而不必為要內聯顯示的每個html元素指定新規則。
順便說一句-您也許應該嘗試使用浮點數而不是內聯顯示div。 您可能會遇到顯示和排名問題，具體取決於向內聯樣式div中輸入的信息量。
解決方案4
0 2010-11-08 17:08:23
您需要將類放在內部div上：
<div class="inline">Hello</div>
<div class="inline">Pete</div>
Divs不會保留內嵌Chrome擴展名
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.