我在父 div ("header") 中有 4 个 HTML 元素,我试图并排显示子 div。问题是 div“headerTitle”的背景色溢出了。我如何将背景颜色限制为字体本身?而且,如果您查看快照,左侧的 HTML 元素会移到线下方(它们与其他元素不一致。请帮助...
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;
}
最佳答案
您在#headerTitle 上使用了float: center;
,这不是正确的值。唯一正确的值是 none、left、right、initial 或 inherit。 float 不仅仅是对齐元素的一种方式。
您将不得不重新对齐您的 div,因为如果右浮动在它之后,它将被放在左浮动之下。所以你必须把#city2 和#city3 放在#city1 之前,添加一个text-align: center
到#header 并添加一个display: inline-block
到#标题标题。
查看我的 jsFiddle 示例:https://jsfiddle.net/fx3ydcfu/
关于html - 并排处理 div 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35957399/