Question

我正在编写一个登录页面并尝试在彼此之下对齐输入，但是我不知道怎样，有没有办法浮动一个具有固定像素数的元素，例如：

input { float: left 10px; }是否可以使用CSS？。

Answer 1

INPUT标记的display属性的默认值为inline/inline-block。

所以如果你有：

<input id="textInput1" class="custom" size="15"/>
<input id="textInput2" class="custom" size="15"/>

[---- INPUT -----] [---- INPUT -----]

输入字段将显示在其他字段旁边。您可以设置INPUT显示属性，使其成为阻止;

input.custom{
 display: block;
}

或者将输入字段包装在DIV元素中，其显示的默认值已经是阻止。

<div><input id="textInput1" class="custom" size="15"/></div>
<div><input id="textInput2" class="custom" size="15"/></div>

[---- INPUT -----]

Answer 2

如果你可以改变你的HTML，将它们包装在div中可以帮助你进行隔离，这样你就可以对它们进行分类并在一组元素中工作，但是，这里是一个不同的CSS解决方案。

input{
   display: block;
}

看到它here

从本质上讲，这正是div所做的，它添加了一个display：block，它将项目带到一个新行。我应该提到我的解决方案会影响所有输入，所以如果你想要更易于管理的东西，可以在这些输入中添加一个类或者使用一个钩子类，这样你只能改变那些有问题而不是所有输入都包含按钮。

这样的事情：

input[type="text"]{
    display: block;
}

或使用特异性更好

// this assumes all your inputs are wrapped by a parent div with class="my_parent_class"

.my_parent_class input[type="text"]{
    display: block;
}

Answer 3

“浮动”根本不是你想要的。

其他大部分答案似乎都是将您的问题解释为与display:block vs inline有关，但在我看来，您正在询问如何通过特定的方式调整输入的位置像素数，是正确的吗？

如果是这样，一种快捷的方法是通过将其margin-left设置为某个正值或负值来调整元素的位置：

.moveToLeft {margin-left:-10px}
.moveToRight {margin-left:10px}

<input><br>
<input class="moveToLeft"><br>
<input class="moveToRight"><br>