时间戳

首页 > 解决方案 > 为什么 display:inline-block 对齐不符合预期

html - 为什么 display:inline-block 对齐不符合预期

问题描述

好的，所以当我得到一个出乎意料的布局时，我试图了解该display:inline-block属性。

如果我从第一个 div 中删除文本（即first），则对齐会更正。

div{
  display:inline-block;
  height:100px;
  width:100px;
}
<div style="background:grey;">first</div>
<div style="background:red;"></div>

我希望两个<div>元素都在同一水平面上。

我知道还有其他方法可以做到这一点，但我真的很想知道这段代码哪里出了问题（或者我误解了什么）。

标签： htmlcss

解决方案

发生这种情况是因为vertical-alignis的默认属性baseline，而您没有在示例中指定它。这意味着inline-block元素将与其基线对齐：

'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

简而言之，这意味着如果 inline-block 元素中有文本，则该元素将与该文本的基础对齐。如果没有文本，它将与下边距对齐。因此，与没有文本的内联块元素相比，其中包含文本的内联块元素会被下推。

这可以通过设置,或更优选地的 avertical-align来纠正：topbottommiddle

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  vertical-align: middle;
}
<div style="background:grey;">first</div>
<div style="background:red;"></div>

可以 float将元素添加到 中left，尽管这是可行的，因为将float元素从流上下文中取出，并将它们视为块元素。应用float: left基本上消除了display: inline-block; 您不能float使用 inline-block 元素。

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  float: left;
}
<div style="background:grey;">first</div>
<div style="background:red;"></div>

产生与以下相同的效果：

div {
  height: 100px;
  width: 100px;
  float: left;
}
<div style="background:grey;">first</div>
<div style="background:red;"></div>

推荐阅读