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

Question

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

如果标签文本比标签大，文本会移到下一行。

我包装了标签文本，但如果标签文本太长，它没有对齐复选框和标签在同一行。

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

- user3392135

Answer 1

Check this

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

- Ijas Ameenudeen

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

已更新的示例

- Dhaval Marthak

---

如果标签文本太长，那么复选框下方才会对齐标签，我遇到了这个问题。 - user3392135

我尝试了你的代码Dhaval，但是出现了相同的问题，一些标签文本与复选框对齐时会在下方。其余所有内容都按预期在同一行上对齐，但只有少数未能正确对齐。 - user3392135

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>

- user14218683

Answer 4

我也遇到了同样的问题，但是没有一个答案对我有用。 我正在使用 Bootstrap，下面的 CSS 代码帮助了我：

label {
 display: contents!important;
}

- THE_GREAT_MARKER

Answer 5

这里还有另一种方法：

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

- EscapeNetscape

Answer 6

如果您正在使用Bootstrap，请使用“checkbox”或“checkbox-inline”类将标签和输入框包装在一个div中。

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

Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

- Mabu

Answer 7

使用以下CSS来对齐标签和复选框

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

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

- Sai

Answer 8

这对我有用

CSS

input[type="checkbox"] {
    display: inline-block;
    width: auto;
  }

HTML

<div class="checkbox">
    <input type="checkbox">
    <label>test data</label>
</div>

- DENZ

---

这个答案并不能解决问题。如果<label>元素的内容超过了包含它的<div class="checkbox">元素，它仍然会在<input>元素下面断行。将该元素的样式设置为固定宽度（如100像素），并添加一些更长的文本内容到<label>里，以便自己检查。 - bitski

Answer 9

请尝试一下。

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

li input {float: left;}
li label {word-wrap: break-word; line-height: 16px; float: left;}

- Piyush Marvaniya

---

因为内联样式而被踩。 - Mark

Answer 10

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

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

- Bob