Question

我有一个有两个孩子的容器，我想在线显示。把它想象成一个容器元素，上面有一个协议文本。

以下是显示当前代码的codepen： https://codepen.io/alansouzati/pen/yXPrvQ

问题在于我无法弄清楚如何正确地与复选框一起正确显示标签，使其不会溢出。这些文本往往很长，这就是问题所在。

目前我在包装盒内看到一个水平卷轴，我不知道它来自哪里。

我在代码中遗漏了哪些想法？

.container {
  width: 288px;
  border: 1px solid;
  padding: 6px 24px;
  display: block;
  white-space: nowrap;
  overflow: auto;
}

.checkbox,
.label {
  display: inline-block;
}

.checkbox {
  width: 12px;
  margin-right: 12px;
}

.label {
  word-break: break-word;
  white-space: normal;
  vertical-align: middle;
  width: calc(100% - 24px)
}

Answer 1

实际问题与原生复选框中的边距无关，但在DOM中有实际的间距字符。

检查此代码：https://codepen.io/alansouzati/pen/YQEmdN

而不是：

<div class="container">
  <span class="checkbox">
    <input type="checkbox" />
  </span>
  <span class="label">this is a really long label that I would like to wrap</span>
</div>

我做了

<div class="container">
  <span class="checkbox">
    <input type="checkbox" />
  </span><span class="label">this is a really long label that I would like to wrap</span>
</div>

卷轴现在已经消失了。

这可能是codepen呈现代码的方式的一些问题，但在我的实际应用程序中，我不必为此烦恼。但在我的情况下，很难验证，因为我正在使用JSX + React。

Answer 2

由于您的.container有overflow: auto和white-space: nowrap;

，您会看到滚动条

如果必须这样做，我会删除这些属性并使用flexbox以更干净的方式解决它，而不会进行显式计算以调整用户代理样式，因为不同的浏览器会对这些元素应用不同的样式。

.container {
  display: flex;
}

显示内联容器

2 个答案: