避免文本显示在复选框下方

Question

如何在复选框下方停止突破到新行的文本？

[x] this is a text that
break.

我想要的：

[x] this is how I want
   the text to appear. 

HTML：

<input class="myCheckbox" type="checkbox" value="1">
<label>text..</label>

Answer 1

编辑3：改进的答案 - 我建议使用flexbox，因为你只需要一行CSS，它直接相对响应。

只需将输入和标签包装在div中并像这样应用display: flex;：

<div>
   <input class="myCheckbox" type="checkbox" value="1">
   <label>Text</label>
</div>

div {
    display: flex
}

在这里查看示例https://jsfiddle.net/q5vv6bmj/1/

---

原答案：

将position: absolute应用于您的标签应解决此问题。

在这个jsfiddle中查看我的解决方案：https://jsfiddle.net/px1h7Ltv/

编辑：如果你想防止标签重叠，那么你可以将它们包装在<div>标签中并应用这样的填充或边距：https://jsfiddle.net/px1h7Ltv/3/这不是响应。

编辑2：或者您可以将position: absolute应用于具有负左值的<input>，如下所示：https://jsfiddle.net/4d286j8h/2/

比所有这些更好的方法可能是使用一个最基本的CSS只需要一行CSS并为你完成所有工作。这是一个例子：https://jsfiddle.net/q5vv6bmj/1/

Answer 2

使用flexbox可以轻松完成。我还建议将for=""和id=""配对添加到标签和复选框以获得更好的可访问性。

.container {
  display: flex;
  align-items: flex-start;
  max-width: 150px;
}

.myCheckbox {
  margin-right: 10px;
}

<p class="container">
  <input id="myCheckbox_1" class="myCheckbox" type="checkbox">
  <label for="myCheckbox_1">this is how I want the text to appear.</label>
</p>

您还可以将复选框包装在标签中。

.myLabel {
  display: flex;
  align-items: flex-start;
  max-width: 150px;
}

.myCheckbox {
  margin-right: 10px;
}

<label class="myLabel">
  <input class="myCheckbox" type="checkbox">
  this is how I want the text to appear.
</label>

Answer 3

你有没有尝试将<input>放在<label>内？像这样：

<label><input class="myCheckbox" type="checkbox" value="1"> text..</label>

Answer 4

将您的输入放在标签内，然后将以下CSS应用于您的标签：

label {
  display: block;
  padding-left: 20px;
  text-indent: -25px;
}

label {
  display: block;
  padding-left: 20px;
  text-indent: -25px;
}

<label><input class="myCheckbox" type="checkbox" value="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique quis turpis at iaculis. Donec metus lacus, hendrerit nec egestas vitae, pulvinar vel mi. Nunc dolor lorem, rhoncus vitae justo vitae, elementum interdum urna. Etiam ultrices tellus efficitur, accumsan turpis sed, sodales ligula. Vestibulum dapibus accumsan ligula id luctus. Integer ut ultricies quam. Vestibulum sed varius nisi.</label>

Answer 5

你可以使用display: table-cell：

.grp {
  display: table;
  margin-bottom: 1rem;
}

.grp .myCheckbox, .grp label {
  display: table-cell;
}

<form>
  <div class="grp">
    <input id="cb1" class="myCheckbox" type="checkbox" value="1">
    <label for="cb1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</label>
  </div>
  <div class="grp">
    <input id="cb2" class="myCheckbox" type="checkbox" value="1">
    <label for="cb2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</label>
    </div>
  <div class="grp">
  <input id="cb3" class="myCheckbox" type="checkbox" value="1">
    <label for="cb3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</label>
  </div>
<form>