Question

所以我正在尝试用CSS做一些样式，但我遇到了问题。

body {
  margin: 0 auto;
}

#headLeft {
  background-color: red;
  height: 50px;
  width: 30%;
  display: inline-block;
}

#headRight {
  background-color: blue;
  height: 50px;
  width: 70%;
  margin-left: -4px;
  display: inline-block;
}

#logo {
  margin-left: 10px;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}

<body>
  <div id="headLeft">
    <div id="logo">
      Here's the logo!
    </div>
  </div>
  <div id="headRight"></div>
</body>

有人可以告诉我为什么文字“这是徽标！”使整个事情不起作用？标题的左侧比应该的大15px。

奇怪的是，如果我删除文字（所以“这是徽标！”），一切都很完美。恢复正常！

没有任何文字的结果截图，这正是我想要的：

如果我添加一些文本（此处为“logo”），结果的屏幕截图，左边的红色矩形太多了：

Answer 1

只需对您的身体使用display:flex属性即可。

body {
   margin: 0 auto;
   display:flex;
}

#headLeft {     
   background-color: red;
   height: 50px;
   width: 30%;
   display: inline-block;
}

#headRight {        
   background-color: blue;
   height: 50px;
   width: 70%;
   margin-left: -4px;
   display: inline-block;
}

#logo {
   margin-left: 10px;
   border-width: 1px;
   border-color: red;
   border-style:solid;  
    display: inline-block;
}

<body>

<div id="headLeft"> 

   <div id="logo">

      <p>Here's the logo!</p>

   </div>

</div>

<div id="headRight">

</div>

</body>

Answer 2

display:inline-block是造成问题的原因，并不是真正做到这一点的最佳方法。它导致元素的布局不同于原来的元素（内嵌元素与块元素的垂直对齐方式不同），并导致CSS Box模型以不同方式计算总大小。

相反，只需对两个标头使用float:left，然后将clear:both（实际上可能只是clear:left）应用到最后一个浮动元素之后的下一个元素，以清除漂浮并回到常规布局。

此外：

CSS Box Model将每个元素划分为一个＆＃34;框＆＃34;它的内容有一个区域。默认情况下，当您指定height或width时，您只需指定此最内容区域的大小。在该区域之外是填充，然后是边界，然后是边缘。为元素设置width时，不包括填充，边框和边距。因此，如果您将元素的width设置为100%，然后添加1px粗边框，那么您的元素实际上将为100% + 2px（1 px为左边和右边1 px宽。

在你的情况下，你的大小因此变成：30％+ 70％+ 1px + 1px（不要忘记边界！），这超过100％并且可能导致问题。

如果设置box-sizing:border-box，则可以更改框模型大小元素的方式，使其包含填充和边框。这样，当您设置width时，将考虑填充和边框。

＆＃13;

/* Have all width and height settings include the padding and borders */
* { box-sizing:border-box; }

body {
  margin: 0 auto;
}

#headLeft {
  background-color: red;
  height: 50px;
  width: 30%;
  float:left;

}

#headRight {
  background-color: blue;
  height: 50px;
  width: 70%;
  float:left;
}

#logo {
  margin-left: 10px;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}

＆＃13;

<body>
  <div id="headLeft">
    <div id="logo">
      Here's the logo!
    </div>
  </div>
  <div id="headRight"></div>
</body>

＆＃13;

Answer 3

问题的实际原因是因为内联元素的默认垂直对齐方式为baseline（如您所见）。要更改此设置，请将其设置为中间或顶部：

＆＃13;

body {
  margin: 0 auto;
}

#headLeft {
  background-color: red;
  height: 50px;
  width: 30%;
  display: inline-block;
}

#headRight {
  background-color: blue;
  height: 50px;
  width: 70%;
  margin-left: -4px;
  display: inline-block;
  vertical-align: top;
}

#logo {
  margin-left: 10px;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}

＆＃13;

<body>
  <div id="headLeft">
    <div id="logo">
      Here's the logo!
    </div>
  </div>
  <div id="headRight"></div>
</body>

＆＃13;

Answer 4

添加浮动：左;到#headleft

https://codepen.io/anon/pen/pwzeBZ

HTML

<div id="headLeft"> 

   <div id="logo">

      Here's the logo!

   </div>

</div>

<div id="headRight">

</div>

<强> CSS

body {
   margin: 0 auto;
}

#headLeft {     
   background-color: red;
   height: 50px;
   width: 30%;
   display: inline-block;
   float: left;
}

#headRight {        
   background-color: blue;
   height: 50px;
   width: 70%;
   display: inline-block;
}

#logo {
   margin-left: 10px;
   border-width: 1px;
   border-color: red;
   border-style:solid;          
}

Answer 5

用display: inline-block;替换float:left;可以解决问题。

body {
  margin: 0 auto;
}

#headLeft {
  background-color: red;
  height: 50px;
  width: 30%;
  float: left;
}

#headRight {
  background-color: blue;
  height: 50px;
  width: 70%;
  margin-left: -4px;
  float: left;
}

#logo {
  margin-left: 10px;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}

<body>
<div id="headLeft">
  <div id="logo">
    Here's the logo!
  </div>
</div>
<div id="headRight">
</div>
</body>

Answer 6

内联属性不适用于#headLeft的子元素和#headRight。

在这种情况下，两个元素都是对齐的，但是#logo正在弄乱那个对齐。如果从#headLeft删除#logo，你会注意到这个陈述。

要解决此问题，您可以：

将float属性添加到#logo
添加一个与#headRight

这里我只使用了浮动。

＆＃13;

body {
  margin: 0 auto;
}

#headLeft {
  background-color: red;
  height: 50px;
  width: 30%;
  display: inline-block;
}

#headRight {
  background-color: blue;
  height: 50px;
  width: 70%;
  margin-left: -4px;
  display: inline-block;
}

#logo {
  margin-left: 10px;
  border-width: 1px;
  border-color: red;
  border-style: solid;
  float: left;
}

＆＃13;

<body>
  <div id="headLeft">
    <div id="logo">
      Here's the logo!
    </div>
  </div>
  <div id="headRight"></div>
</body>

＆＃13;

div有点偏移

6 个答案: