Javascript 将复选框标签设置为右侧或固定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14707313/
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
Set checkbox label to right side or fixed position
提问by PMe
This is the code for a standard checkbox:
这是标准复选框的代码：
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
How can I set the label (text) of a checkbox to the right side or to a fixed "px" position?
如何将复选框的标签（文本）设置为右侧或固定的“px”位置？
Something like align-rightor right: 50px
像align-right或right: 50px
采纳答案by Sri
Add a classnameor ID for the label like the following:
classname为标签添加一个或 ID，如下所示：
<label for="checkbox-1" class="chkbox">I agree</label>
Then add css rule for the class,
然后为类添加css规则，
.chkbox {
padding-left: 10px;
font-weight: bold;
}
You can give padding, border or whatever style u like for the label.
您可以为标签提供填充、边框或任何您喜欢的样式。
Demo: DEMO FIDDLE
演示：演示小提琴
回答by noisybuddha
just add style in required label
只需在所需标签中添加样式
<label for="checkbox-1" style="float:right">I agree</label>
回答by Steph
Fix the width of the input field and label and float them.
固定输入字段和标签的宽度并浮动它们。
For example:
例如：
input {
width: 200px;
float:left;
}
label {
width:300px;
float:left;
}
And clear your floats afterwards.
然后清除你的浮标。
回答by user1510176
If you have this controls in html file
如果您在 html 文件中有此控件
<label for="2">Laparoscopic surgery</label>
<input type="checkbox" name="question" value="14" class="clickable" id="2" />
It's enough to do this in css:
在 css 中做到这一点就足够了：
.clickable{
float: left;
}
回答by Sora
Float the checkbox to the right and the label to the left, and set the label position to absolute.
将复选框向右浮动，将标签向左浮动，并将标签位置设置为绝对。
<input type="checkbox" name="question" value="14" class="clickable" id="2"
style="float: left;"/>
<label for="2" style="float: right; position: absolute;">Laparoscopic
surgery</label>
If you just put the label text to the right of the box without a label, it will not cause the checkbox to be checked when clicked.
如果只是将标签文本放在没有标签的框的右侧，则不会导致单击时选中该复选框。
回答by bipen
using jquery
使用jQuery
$(function(){
$('label[for="checkbox-1"]').css({right: 50});
});
OR
或者
$('label[for="checkbox-1"]').css({'margin-left': 50});
