如何防止复选框/单选按钮下的长文本标签换行？

Question

示例标记和 CSS

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
}

.control-label {
  display: inline;
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

注意： 我知道我可以将复选框包装在标签内以解决该问题，但是从“indi-wrap”类开始，它会自动填充到父“wrap”中，因此我无法在“indi-wrap”中编辑任何内容。

有没有办法将文本标签的第二行对齐到第一行？防止它包装在复选框下。

Answer 1

保留现有标记，实现接近目标的一种简单方法是使用inline-block, 的 3 个子级.indi-wrap，并使用 amax-width将它们全部放在一行中。

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
  display: block;
}

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}
.control-label {
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}