Question

我们知道显示：内联和显示：当没有定义特定的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`
}

＆＃13;

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

＆＃13;

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

＆＃13;

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，您需要将width作为静态值，并需要使用媒体查询为每个分辨率修改它。

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>

Answer 3

显示内联块使得div显示在行中但是用于在新行上显示某些内容，从代码中删除br，将这两个div放在另一个div＆amp;将显示内联块显示给父div。如果它仍然无效，则首先给出50％的宽度，给第二个div给出50％的宽度

Answer 4

您可以随时尝试

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

例如：

＆＃13;

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

＆＃13;

带显示的标签：内联块从下一行开始

4 个答案: