21

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

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

4

8 回答 8

17

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

input[type=checkbox] { width: auto }

于 2013-01-19T03:23:05.837 回答
16

我认为导致您的复选框像这样居中的问题是因为您设置了输入width:200px，所以您需要做的就是width:auto通过其 id（自动登录）将其添加到您的复选框。您还需要为您的复选框创建一个 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;
}

希望这有帮助:)

于 2013-01-19T04:03:10.530 回答
6

试试这个，这是演示链接

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

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

}

.clear {
    clear: both;
}
于 2013-01-19T04:08:23.453 回答
1

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

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

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

.clear {
    clear: both;
}

请参阅jsFiddle 示例。

于 2013-01-19T03:32:17.163 回答
0

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

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

于 2013-01-19T03:20:01.687 回答
0

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

于 2013-01-19T03:26:56.000 回答
0

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

为了完成这件事，只需将它放在一个 div 中，并给 div 这个样式：

.checkDIV
{
    text-align:left;
}

例子：

<div align="center" class="checkDIV">
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
</div>
于 2013-02-17T19:38:08.820 回答
-1

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

于 2013-01-19T03:22:13.617 回答