标签使用display:inline-block时会从下一行开始显示。

Question

我们知道，当特定的CSS属性（如padding、width、margin等）未定义时，display:inline和display:inline-block会产生相同的结果。

因此，如果我仅在label元素上使用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"，标签元素会从新行开始。有人能解释一下这背后的原因吗？

- nik

---

你忘记了一些重要的东西，那就是 block 部分在 inline-block 中，所以它的行为像 inline 但也具有一些 block 属性，因此结果会不同。 - Temani Afif

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>

- Ehsan

Answer 2

原因是文本太长了。所以当文本长度超过一定限制时，它会自动换行到下一行。

请查看以下示例，确认其是否符合您的预期结果。

此处我使用了flexbox，因此如果您的浏览器版本为IE11及以下，则需要使用替代方法。

div {
  display: flex;
  align-items: flex-start;
  width: 100%;
  
}
label {
  flex: 1;
}

<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>

在IE11中，您需要将宽度设置为静态值，并使用媒体查询来针对每个分辨率进行修改。

input {
  display: inline-block;
  min-width: 20px;
}
label {
  float: right;
  width: 90%;
  display: inline-block;
}

<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>

- Abin Thaha

---

不，这也可以在IE11中运行。 - Domenik Reitzner

Answer 3

你可以随时尝试

<label><input> My text</label>

例如：

<div><label style="display:inline-block;">
<input type="checkbox" value=1 name ="h">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><label style="display:inline;">
<input type="checkbox" value=1 name ="h">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>

- Domenik Reitzner

Answer 4

display:inline-block使div在同一行中显示，但
用于使某些内容出现在新的一行。从您的代码中删除br，将这两个div放入另一个div中，并为父div设置display:inline-block。如果仍然无法正常工作，请给第一个div和第二个div各自赋值50%的宽度。

- Faizal Hussain