html – 如何防止复选框/单选按钮下的长文本标签包装？

2023年12月27日 213次阅读

Sample Markup and 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”中编辑任何内容.

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

最佳答案 保持现有标记,一种简单的方法来实现接近的东西是在.indi-wrap的3个子节点上使用内联块,并使用最大宽度将它们全部放在一行中.

.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;
}
<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>
点赞