Html 如何在html中的同一行中对齐复选框和标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22321795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align the checkbox and label in same line in html?
提问by user3392135
Within litags, I am placing a checkbox and label input.
在li标签中，我放置了一个复选框和标签输入。
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,
谢谢，
回答by Ijas Ameenudeen
Wrap the checkbox with the label and check this
用标签包裹复选框并检查这个
HTML:
HTML：
<li>
<label for="checkid" style="word-wrap:break-word">
<input id="checkid" type="checkbox" value="test" />testdata
</label>
</li>
CSS:
CSS：
[type="checkbox"]
{
vertical-align:middle;
}
回答by Dhaval Marthak
You should use <label for="">for the checkboxes or radios, and to align checkboxes vertical-alignis enough
您应该<label for="">用于复选框或收音机，并且对齐复选框vertical-align就足够了
Try changing your markup to this
尝试将您的标记更改为此
<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>
And set CSS like
并将 CSS 设置为
input[type="checkbox"]
{
vertical-align:middle;
}
In case of long text
如果是长文本
label,input{
display: inline-block;
vertical-align: middle;
}
Side note:In label, value of for must be the id of checkbox.
旁注：在标签中，for 的值必须是复选框的 id。
回答by Piyush Marvaniya
Please try it
请尝试一下
<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>
回答by Bob
Just place a div around the input and label...
只需在输入和标签周围放置一个 div ......
<li>
<div>
<input id="checkid" type="checkbox" value="test" />
</div>
<div>
<label style="word-wrap:break-word">testdata</label>
</div>
</li>
回答by Mabu
If you are using bootstrap wrap your label and input with a div of a "checkbox" or "checkbox-inline" class.
如果您使用的是引导程序，请使用“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
参考：https: //www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
回答by Dibyendu Mitra Roy
If you are using bootstrap then use this class in the holding div
如果您使用的是引导程序，则在持有 div 中使用此类
radio-inline
Example:
例子：
<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>
Here the label Active and the checkbox will appear to be aligned.
在这里，标签 Active 和复选框将显示为对齐。
回答by Sai
Use below css to align Label with Checkbox
使用下面的 css 将 Label 与 Checkbox 对齐
.chkbox label
{
position: relative;
top: -2px;
}
<div class="chkbox">
<asp:CheckBox ID="Ckbox" runat="server" Text="Check Box Alignment"/>
</div>
回答by faizan
Use this in your listyle.
以您的li风格使用它。
style="text-align-last: left;"
