Question

在li代码中，我正在放置一个复选框和标签输入。

如果标签文字大于标签，则文字会转到下一行。

我包装了标签文字，但如果标签文字太长，它就不会将复选框和标签对齐在同一行。

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label style="word-wrap:break-word">testdata</label>
</li>

谢谢，

Answer 1

用标签包裹复选框并检查此

<强> HTML：

<li>
     <label for="checkid"  style="word-wrap:break-word">
        <input id="checkid"  type="checkbox" value="test" />testdata
     </label>
</li>

<强> CSS：

[type="checkbox"]
{
    vertical-align:middle;
}

http://jsfiddle.net/pKD9K/1/

Answer 2

您应该使用<label for="">作为复选框或无线电，并对齐复选框vertical-align就够了

尝试将标记更改为此

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label for="checkid">testdata</label>
</li>

<li>
    <input id="checkid2" type="checkbox" value="test" />
    <label for="checkid2">testdata 2</label>
</li>

将CSS设置为

input[type="checkbox"]
{
    vertical-align:middle;
}

如果是长文

label,input{
    display: inline-block;
    vertical-align: middle;
}

旁注：在标签中，for的值必须是复选框的ID。

Fiddle

Updated Fiddle

Answer 3

以上所有建议均未对我有效。我必须使用以下内容来使复选框居中，并在框的右侧显示标签文本：

<style>
.checkboxes {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  word-wrap: break-word;
}
</style>

<label for="checkbox1" class="checkboxes"><input type="checkbox" id="checkbox1" name="checked" value="yes" class="checkboxes"/>
Check the box.</label>

Answer 4

请尝试

<li>
<input id="checkid" type="checkbox" value="test" style="float: left;">
<label style="word-wrap: break-word; line-height: 16px; float: left;">testdata</label>
</li>

Answer 5

如果您使用的是引导程序，请包装标签，并使用“复选框”或“复选框内联”类的div输入。

<li>
    <div class="checkbox">
        <label><input type="checkbox" value="">Option 1</label>
    </div>
</li>

参考： https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Answer 6

只需在输入和标签周围放置一个div ......

    <li>
      <div>
        <input id="checkid"  type="checkbox" value="test" />
      </div>
      <div>
        <label  style="word-wrap:break-word">testdata</label>
      </div>
    </li>

Answer 7

如果您正在使用引导程序，则在保留div中使用此类

radio-inline

示例：

<label for="active" class="col-md-4 control-label">Active</label>
<div class="col-md-6 radio-inline">
    <input type="checkbox" name="active" value="1">
<div>

此处标签为活动，并且该复选框似乎已对齐。

Answer 8

在CSS下方使用以使Label与复选框对齐

    .chkbox label
            {
                position: relative;
                top: -2px;
            }

<div class="chkbox">
<asp:CheckBox ID="Ckbox" runat="server" Text="Check Box Alignment"/>
</div>

Answer 9

这里的另一种方法：

.checkbox-wrapper {
  white-space: nowrap
}
.checkbox {
  vertical-align: top;
  display:inline-block
}
.checkbox-label {
  white-space: normal
  display:inline-block
}

<div class="text-left checkbox-wrapper">
  <input type="checkbox" id="terms" class="checkbox">
  <label class="checkbox-label" for="terms">I accept whatever you want!</label>
</div>

Answer 10

我遇到了同样的问题，但是没有人为我工作。我正在使用引导程序，以下CSS代码对我有帮助：

label {
 display: contents!important;
}

Answer 11

以您的li风格使用它。

style="text-align-last: left;"

如何在html中将复选框和标签对齐在同一行？

11 个答案: