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

使用flexbox可以轻松完成。我还建议将OUTFILE=$STDERR和for=""配对添加到标签和复选框，以便更好地访问。

＆＃13;

id=""

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

Answer 2

您是否尝试将<input>置于<label>内？像这样：

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

Answer 3

编辑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/这不是响应。< / p>

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

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

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：

＆＃13;

.grp {
  display: table;
  margin-bottom: 1rem;
}

.grp .myCheckbox, .grp label {
  display: table-cell;
}

＆＃13;

<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>

＆＃13;

避免文本显示在复选框

5 个答案: