如何在html中将同一行中的复选框和标签对齐？ [英] How to align the checkbox and label in same line in html?

问题描述

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

如果标签文字大于

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

 < li> 
< input id =checkidtype =checkboxvalue =test/> 
< label style =word-wrap：break-word> testdata< / label> 
< / li> 
  

谢谢，

解决方案

使用标签包装复选框并检查此

HTML： b

 < li> 
< label for =checkidstyle =word-wrap：break-word> 
< input id =checkidtype =checkboxvalue =test/> testdata 
< / label> 
< / li> 
  

CSS：

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

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

Within li tags, I am placing a checkbox and label input.

If label text is larger than label, the text goes to the next line.

I wrapped the label text but it's not aligning the checkbox and label in the same line if label text is too long.

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

Thanks,

解决方案

Wrap the checkbox with the label and check this

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/

这篇关于如何在html中将同一行中的复选框和标签对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！