将 HTML 复选框移动到其宽度的左侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14410753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move HTML checkbox to left hand side of it's width
提问by Connel
I cannot use any JavaScript and would like an answer in just CSSif possbile. I have the following check box in a form:
我不能使用任何 JavaScript，如果可能的话，我只想用 CSS 来回答。我在表单中有以下复选框：
<label for="autologin">Remember Me</label>
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
<div class="clear"></div>
with the following CSS:
使用以下 CSS：
label {
float: left;
margin: 5px 0px;
}
input {
float: right;
margin: 5px 0px;
width: 200px;
}
.clear {
clear: both;
}
What CSS can I add to the check-box to make it appear on the left hand side of its 200px width? I'm having a bit of a hard time with floats (vertical alignment in particular) but I hear it's the correct practice.
我可以向复选框添加什么 CSS 以使其显示在 200 像素宽度的左侧？我在使用浮动（尤其是垂直对齐）方面遇到了一些困难，但我听说这是正确的做法。
EDIT: OK so a lot of people are suggesting not floating the inputs to the right. If so I may as well not use float at all and just set the width of the label and have a
after each line. Would this be acceptable practice or am I just miss-using floats here?
编辑：好的，所以很多人建议不要将输入浮动到右侧。如果是这样，我也可能根本不使用浮动，只需设置标签的宽度并
在每行之后都有一个。这是可以接受的做法还是我只是在这里错过了使用浮动？
采纳答案by sourcecode
回答by Visal Chhourm
I think the problem that cause your checkbox to be center like that because you set the input width:200pxso all you need to do is to add the width:autoto your checkbox by its id(autologin). Also you need to create a div container for your check box. Here is the HTML:
我认为导致您的复选框像那样居中的问题是因为您设置了输入，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>
and here is the CSS:
这是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;
}
Hope this help :)
希望这有帮助:)
回答by sevenseacat
Don't 'move it to the left of its width' - let it dictate its own width and then add padding on the right side if you need it. But judging from your design, you don't.
不要“将其移动到其宽度的左侧”-让它决定自己的宽度，然后根据需要在右侧添加填充。但从你的设计来看，你没有。
input[type=checkbox] { width: auto }
input[type=checkbox] { width: auto }
回答by Mehdi Ghanavatian
You can't align or change a checkbox's direction, because it has no attachment, it's just a box.
您无法对齐或更改复选框的方向，因为它没有附件，只是一个框。
In order to get this done simply put it in a div and give the div this style:
为了完成这项工作，只需将它放在一个 div 中并赋予 div 这种样式：
.checkDIV
{
text-align:left;
}
example:
例子：
<div align="center" class="checkDIV">
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
</div>
回答by uvinod
If you are using float attribute means, you have to provide a width to the form container.
如果您使用浮动属性方式，则必须为表单容器提供宽度。
回答by Onur Y?ld?r?m
You should remove float: right;and width: 200px;in your inputclass declaration. And I would set widths for all labels (i.e. 200px) to align the second column.
你应该在你的类声明中删除float: right;和。我会为所有标签设置宽度（即 200 像素）以对齐第二列。width: 200px;input
label {
float: left;
margin: 5px 0px;
width: 200px;
}
input {
/*float: left;*/ /* This will also work. */
margin: 5px 0px;
}
.clear {
clear: both;
}
See jsFiddle Example.
请参阅jsFiddle 示例。
回答by Niet the Dark Absol
A table is fine for this, since you have (user-supplied) tabular data. This will solve your vertical alignment issues too.
使用表格就可以了，因为您有（用户提供的）表格数据。这也将解决您的垂直对齐问题。
Unfortunately you can't put the checkbox on the left side of its width. Personally, I would recommend avoiding styling inputwithout specifying [type=something]. However, if you use a lot of HTML5 input types such as email, number, urletc then you may find it useful to style all inputone way, then use width:autofor [type=radio]and [type=checkbox]
不幸的是，您不能将复选框放在其宽度的左侧。就个人而言，我建议避免在input不指定[type=something]. 不过，如果你使用了大量的HTML5输入类型如email，number，url等那么你会发现它有用所有风格input的一种方式，然后使用width:auto了[type=radio]和[type=checkbox]
回答by Dyn
Set its width to like 20px, that fixes the problem. It doesn't need to be 200px does it?
将其宽度设置为 20 像素，即可解决问题。它不需要是 200px 是吗？
