为什么 div 从下到上填充内容

Question

为什么左边的div是从下往上填的？我知道我可以使用 CSS float 属性使两个 div 顶部对齐。我只是好奇这个片段的哪一部分导致左侧 div 与另一个片段的底部对齐。

.form-row {
  display: inline-block;
  padding: 0px 30px;
  border: 1px red solid;
  /*float: left;*/
}

span {
  display: block;
}

<div class="form-row">
  <span>Soup?</span>
  <label><input type="radio" value="Yes">Yes<label><br>
  <label><input type="radio" value="No">No<label><br>
</div>

<div class="form-row">
  <span>Salad?</span>
  <label><input type="radio" value="Yes">Yes<label><br>
  <label><input type="radio" value="No">No<label><br>
  <label><input type="radio" value="Maybe">Maybe<label><br>
</div>

Answer 1

inline-block 元素的默认 vertical-align 值为 baseline。只需添加 vertical-align:top; 即可。

.form-row {
  display: inline-block;
  padding: 0px 30px;
  border: 1px red solid;
  vertical-align:top;
}

span, label {
  display: block;
}

<div class="form-row">
  <span>Soup?</span>
  <label><input type="radio" value="Yes">Yes</label>
  <label><input type="radio" value="No">No</label>
</div>

<div class="form-row">
  <span>Salad?</span>
  <label><input type="radio" value="Yes">Yes</label>
  <label><input type="radio" value="No">No</label>
  <label><input type="radio" value="Maybe">Maybe</label>
</div>

此外，请确保您正确关闭了标签。此外，如果将 label 设置为 display:block;

，则可以删除所有中断

Answer 2

默认为基线。尝试 vertical-align-top

为什么 div 从下到上填充内容

Why is div filling content bottom to top

html

css

display