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

vertical-align元素的默认inline-block值为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从下至上填充内容

2 个答案: