html - 为什么即使我有内联 block ，div 元素在调整大小时也会分开？

Question

当我缩小浏览器 + 按钮在复选框事件之间分隔时，尽管两个 div 都有内联 block

请看代码的迷你版:

<div style="display: inline-block;">
  <a class="plus" data-toggle="collapse" data-target="#data" href="#">
    <i class="fa fa-plus-circle"></i><span></span>
  </a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
  <label>
    <input name="unique_id" value="" type="checkbox">
    <div id="unique_id">name - address <span class="label label-info">display</span>
    </div>
  </label>
</div>

但我只希望 + 按钮和复选框在像这张图片那样调整大小时(不调整大小)放在一起

Answer 1

在您的元素上使用 inline-block 时，它们会以父宽度包裹。因此，如果您的结构中有一个父 DIV，只需添加 white-space: nowrap; 即可。它将阻止带有 ìnline-block` 的 child 换行(往下走)。

编辑:你也可以简化你的 HTML 结构，你有很多简单的元素。