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

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之类的东西。

- PMe

---

它不应该已经在右边了吗 -> fiddle ??? - adeneo

抱歉，我应该说我正在使用jQuery Mobile，复选框看起来像这样： 复选框 。你说得对，文本始终位于复选框的右侧，但是我指的是在“按钮”的右侧。 - PMe

Answer 1

只需在所需的标签中添加样式即可。

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

- noisybuddha

Answer 2

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

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

然后为这个类添加css规则，

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

你可以为标签设置填充、边框或其他样式。

演示: DEMO FIDDLE

- Sri

Answer 3

如果您在HTML文件中有这些控件：

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

在css中这样做就足够了：

.clickable{
    float: left;
}

- user1510176

Answer 4

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

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

如果您仅将标签文本放置在框的右侧而没有标签，那么当单击时不会导致复选框被选中。

- Sora

Answer 5

使用jQuery

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

或者

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

在这里编辑代码

- bipen

Answer 6

修复输入字段和标签的宽度并使其浮动。

例如：

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

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

然后清除浮动。

- Steph