問題並排divs

我有一個父div（「標題」）4個HTML元素，我試圖顯示子div並排。問題是div「headerTitle」的背景顏色溢出了。我如何限制背景顏色只是字體本身？而且，如果你看一下快照，向左HTML元素越來越移位到線下（他們是不與其他元素線請幫助...問題並排divs

HTML代碼：

<div id="header" > 
    <div id="City1"> 
     Cities 
    </div> 
    <div id="headerTitle"> 
     Happy Stores 
    </div> 
    <div id="City2"> 
     Cities 
    </div> 
    <div id="City3"> 
     Cities 
    </div> 
</div>

CSS代碼：

#City1 
{ 
    float:left; 
} 
#headerTitle 
{ 
    float:center; 
    background-color:gray; 
} 
#City2 
{ 
    float:right; 
    padding-left: 5px; 
    color:orange; 
} 
#City3 
{ 
    float:right; 
    background-color:pink; 
}

來源

2016-03-12 Nidhin_toms

您有＃使用float: center; headerTitle，這不是一個正確的值。唯一正確的值是none，left，right，initial或inherit。浮動不僅僅是一種對齊元素的手段。

你將不得不重新調整你的div，因爲如果它在它之後，右浮動將被置於左浮動下。因此，您必須在＃city1之前放置＃city2和＃city3，將＃text-align: center添加到#header並將＃display: inline-block添加到#headerTitle。

檢查出我的jsfiddle爲例：https://jsfiddle.net/fx3ydcfu/

來源

2016-03-12 12:14:40 s1h4d0w

感謝您的建議 - 讓我看看 –

沒問題，一定要標記正確的答案，如果其中一個答案的工作！ :) – s1h4d0w

我如何限制背景顏色只是字體本身？

您需要添加display:inline;或display:inline-block到#headerTitle，根據您的要求。

向左HTML元素越來越移動到該線下方

見this answer來定位你的div並排側：

#wrapper { 
    width: 500px; 
    border: 1px solid black; 
    overflow: hidden; /* add this to contain floated children */ 
} 
#first { 
    width: 300px; 
    float:left; /* add this */ 
    border: 1px solid red; 
} 
#second { 
    border: 1px solid green; 
    float: left; /* add this */ 
}

來源

2016-03-12 12:07:47 rybo111

他仍然在一個div上有一個「float：center」，這也不正確。查看我的答案以獲得更全面的解釋。 – s1h4d0w

@ s1h4d0w我剛剛發表評論。 – rybo111

你們一直很有幫助 - 讓我看看 –

如果你的問題是關於頁面元素的定位，這是更好地使用

position:absolute; 
left: *px; 
top: *px;

，而不是

float:left;

&我應該這樣說：

float:center;

不是float屬性的可用值。

來源

2016-03-12 12:30:02

回答

相關問題