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

【问题标题】：Move HTML checkbox to left hand side of it's width将 HTML 复选框移动到其宽度的左侧
【发布时间】：2015-05-07 08:11:39
【问题描述】：

我不能使用任何 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 以使其显示在 200 像素宽度的左侧？我对浮动（特别是垂直对齐）有点困难，但我听说这是正确的做法。

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

【问题讨论】：

标签： html css checkbox css-float forms

【解决方案1】：

不要“将其移动到其宽度的左侧” - 让它决定自己的宽度，然后在需要时在右侧添加填充。但从你的设计来看，你没有。

input[type=checkbox] { width: auto }

【讨论】：

【解决方案2】：

我认为导致您的复选框像这样居中的问题是因为您设置了输入 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;
}

希望得到帮助:)

【讨论】：

【解决方案3】：

试试这个，这是演示link

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

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

}

.clear {
    clear: both;
}

【讨论】：

【解决方案4】：

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

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

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

.clear {
    clear: both;
}

见jsFiddle Example。

【讨论】：

【解决方案5】：

一个表格就可以了，因为你有（用户提供的）表格数据。这也将解决您的垂直对齐问题。

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

【讨论】：

【解决方案6】：

如果你使用浮动属性意味着你必须为表单容器提供一个宽度。

【讨论】：

【解决方案7】：

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

为了完成这项工作，只需将它放在一个 div 中并为 div 赋予这种样式：

.checkDIV
{
    text-align:left;
}

示例：

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

【讨论】：

【解决方案8】：

将其宽度设置为 20px 即可解决问题。不需要200px吧？

【讨论】：