html - 带有显示 :inline-block starts from next line 的标签

Question

正如我们所知，display:inline 和 display:inline-block 在未定义特定 CSS 属性(填充、宽度、边距等)时给出相同的结果

所以如果我只在标签元素上使用 display: inline-block 它应该给我类似的结果，因为它给我 display: inline

<div>
<input type="checkbox" value=1 name ="h"><label style="display:inline-block;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo</label>
<div>

<br>
<br>

<div>
<input type="checkbox" value=1 name ="h"><label style="display:inline;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo</label>
<div>

但是正如您在片段中看到的那样，如果我使用“display: inline-block”标签元素从一个新行开始，

谁能解释一下这背后的原因？

Answer 1

当你没有为 inline-block 元素设置宽度时，它的宽度等于内容的宽度。

如果内容的宽度大于剩余空间，则转到下一行否则将与checkbox保持在同一行

试试这个:

div:first-child label {
  width: 90%;
  vertical-align: top; <-------For align `label` and `checkbox`
}

div:first-child label {
  width: 90%;
  vertical-align: top;
}

<div>
  <input type="checkbox" value=1 name ="h">
  <label class="x" style="display:inline-block;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo
  </label>
</div>
<br><br>
<div>
  <input type="checkbox" value=1 name ="h">
  <label style="display:inline;">rekjhnfkjjjjjjjjjgr fnerkjgkjnkreger gherheru hgir ghoerg oerjg oejrg oerjg oejg ooijer gioerug jerg oerjg eoguj oejg orejg oire ghor tor tgjoirj goih roghori hgorhgo iherog horeh goer ghoeri ghoierh goiehr ge roigh oerig oierg oeh goie gioerh goir oigh rioh goirhgioh roighoir hfgoihroigh oirthfiog hoifhgoirhtiog iohgoihroi ghoirh goid hgioh rioghiofh goihfoihg iohfiogh roidhgoirh oig riohgoirh gohrioh goihftioghfo
  </label>
</div>