html - 为什么带有文本的div与没有文本的div不在同一行上？

This question already has answers here:

Why is this inline-block element pushed downward?
                                
                                    （8个答案）
                                
                        
                                2年前关闭。
            
                    
如您在代码段下方看到的那样，如果所有div都没有文本，或者所有div都具有文本，那么它们将位于同一行。
但是，如果一个或多个为空，而其他具有文本，则它们不会出现在同一行上。
为什么会这样？以及如何克服呢？

.Outer
{
  border: 1px solid black;
}

.D
{
  width: 50px;
  height: 20px;
  display: inline-block;
  background-color: lightblue;
  margin: 10px;
  text-align: center;
}

<div class="Outer">
  <div class="D"></div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D">abc</div>
  <div class="D">abc</div>
</div>

最佳答案

我不知道为什么他们可能有不同的基准。但是您可以强迫它们在top（或根据需要在中间或底部）保持垂直对齐，并帮助他们找到共同的基准！

.Outer
{
  border: 1px solid black;
}

.D
{
  width: 50px;
  height: 20px;
  display: inline-block;
  background-color: lightblue;
  margin: 10px;
  text-align: center;
  vertical-align:top;
}

<div class="Outer">
  <div class="D"></div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D"></div>
  <div class="D"></div>
</div>
<br>
<div class="Outer">
  <div class="D">abc</div>
  <div class="D">abc</div>
  <div class="D">abc</div>
</div>