将HTML复选框移动到其宽度的左侧

Question

我无法使用任何JavaScript，如果可能的话，只想在CSS 中找到答案。我在表单中有以下复选框：

<label for="autologin">Remember Me</label>
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
<div class="clear"></div>

使用以下CSS：

label {
    float: left;
    margin: 5px 0px;
}

input {
    float: right;
    margin: 5px 0px;
    width: 200px;
}

.clear {
    clear: both;
}

我可以在复选框中添加哪些CSS，使其显示在200px宽度的左侧？我对浮子（特别是垂直对齐）有点困难，但我听说这是正确的做法。

编辑：好的，所以很多人都建议不要将输入浮动到右边。如果是这样，我可能根本不使用浮点数，只需设置标签的宽度，并在每行后面加上一个。这是不可接受的做法，还是我错过了在这里使用花车？

Answer 1

我认为导致您的复选框位于中心的问题是因为您设置了输入width:200px所以您需要做的就是通过其ID（自动登录）将width:auto添加到您的复选框。您还需要为复选框创建一个div容器。这是HTML：

<label for="autologin">Remember Me</label>
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div>
<div class="clear"></div>

这是CSS：

label {
    float: left;
    margin: 5px 0px;
}

input {
    float: right;
    margin: 5px 0px;
    width: 200px;
    border:solid 1px;
}
#autologin
{
width:auto;
float:left;
}
#check
{
float:right;
width:200px;
border:solid 1px;
}

.clear {
    clear: both;
}

希望这有帮助：）

Answer 2

不要将它移到宽度的左边。 - 让它指定自己的宽度，然后在需要时在右侧添加填充。但从你的设计来看，你不会。

input[type=checkbox] { width: auto }

Answer 3

试试这个，这是演示link

label {
    float:left;
    margin: 5px 0px;
}

input {
    // float right;
    margin: 5px 0px;
    width: 200px;

}

.clear {
    clear: both;
}

Answer 4

由于您拥有（用户提供的）表格数据，因此表格可以正常使用。这也将解决您的垂直对齐问题。

很遗憾，您无法将复选框放在其宽度的左侧。就个人而言，我建议在不指定input的情况下避免样式[type=something]。但是，如果您使用了很多HTML5输入类型，例如email，number，url等，那么您可能会发现以一种方式设置所有input样式很有用，然后使用width:auto和[type=radio]

的[type=checkbox]

Answer 5

如果使用float属性，则必须为表单容器提供宽度。

Answer 6

您应该在float: right;课程声明中删除width: 200px;和input。我会为所有标签（即200px）设置宽度以对齐第二列。

label {
    float: left;
    margin: 5px 0px;
    width: 200px; 
}

input {
    /*float: left;*/   /* This will also work. */
    margin: 5px 0px;
}

.clear {
    clear: both;
}

请参阅 jsFiddle Example 。

Answer 7

您无法对齐或更改复选框的方向，因为它没有附件，只是一个框。

为了完成这项工作，只需将其放入div中，并将div设为这种风格：

.checkDIV
{
    text-align:left;
}

示例：

<div align="center" class="checkDIV">
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
</div>

Answer 8

将其宽度设置为20px，以解决问题。它不需要200px吗？