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

Set checkbox label to right side or fixed position

本文关键字：定位 位置 复选框 标签 设置      更新时间：2023-09-26

这是标准复选框的代码：

<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 的东西

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

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

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

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

然后为类添加css规则

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

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

演示：演示FIDDLE

如果在html文件中有此控件

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

在css中这样做就足够了：

.clickable{
    float: left;
}

使用jquery

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

或

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

小提琴这里

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

例如：

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

然后清理你的漂浮物。

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

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

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

相关文章：