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,等numberurl那么您可能会发现以一种方式设置样式很有用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 回答