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

您可以为标签添加填充，边框或任何样式。

演示：DEMO FIDDLE

Answer 3

使用jquery

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

或

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

fiddle here

Answer 4

修复输入字段的宽度并标记并浮动它们。

例如：

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

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

然后清理你的漂浮物。

Answer 5

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

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

这足以在css中执行此操作：

.clickable{
    float: left;
}

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

5 个答案: