html - 并排处理 div 问题

Question

我在父 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;
}

Answer 1

您在#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/