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

Question

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

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

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

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

谢谢，

原文由 user3392135 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Ijas Ameenudeen 发布，翻译遵循 CC BY-SA 3.0 许可协议