javascript - 将复选框标签设置为右侧或固定位置

Question

这是标准复选框的代码：

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

如何将复选框的标签（文本）设置到右侧或固定的“px”位置？

像align-right或right: 50px

Answer 1

只需在所需标签中添加样式

<label for="checkbox-1" style="float:right">I agree</label>

Answer 2

为标签添加一个classname或 ID，如下所示：

<label for="checkbox-1" class="chkbox">I agree</label>

然后为类添加css规则，

 .chkbox {
   padding-left: 10px;
   font-weight: bold;
 }

您可以为标签提供填充、边框或任何您喜欢的样式。

演示：演示小提琴

Answer 3

如果您在 html 文件中有此控件

<label for="2">Laparoscopic surgery</label>
<input type="checkbox" name="question" value="14" class="clickable" id="2"  />

在 css 中这样做就足够了：

.clickable{
    float: left;
}

Answer 4

固定输入字段和标签的宽度并浮动它们。

例如：

input {
   width: 200px;
   float:left;
}

label {
   width:300px;
   float:left;
}

然后清理你的花车。

Answer 5

使用 jQuery

$(function(){ 
 $('label[for="checkbox-1"]').css({right: 50});
});

或者

$('label[for="checkbox-1"]').css({'margin-left': 50});

在这里摆弄

Answer 6

将复选框浮动到右侧，将标签浮动到左侧，并将标签位置设置为绝对。

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

如果只是将标签文本放在没有标签的框的右侧，则不会导致单击时选中复选框。