用于定位输入的CSS样式

Question

我想创建一个页面的一部分，我有五个input[type=text]，但我需要以特定的方式将它们放在一起，就像在这张图片上一样：

我尝试使用display属性做某事，但它没有用。

此外，我不想使用粗略输入left和top属性。

Answer 1

看起来你只想让你的表单以元素为中心。可以轻松地进行居中，因为输入元素默认为display: inline-block，您只需要让容器有text-align居中位置即可。

以下是一些示例代码。您可以使容器变大但是它会居中。您也可以调整边距

HTML

<div class="centerForm">
    <div class="centerForm-row"><input type="text"/> <input type="text"/></div>
    <div class="centerForm-row"><input type="text"/> <input type="text"/></div>
    <textarea/>
</div>

CSS

.centerForm {
    text-align: center;
}

.centerForm-row {
    margin: 30px 0;
}

.centerForm-row input {
    margin-left: 40px;
}

.centerForm-row input:first-child {
    margin-left: 0;
}

这是一个fiddle

很抱歉，如果这不是您想要的，请随时发表评论。

编辑：

因此，为了解决您在本专栏的评论中的问题，您可以执行以下两项操作之一。点击A）。和B）。获得单独设计的全屏幕演示。

A). 让您的容器有min-width。这会强制使用较小宽度的水平滚动条，但会使您的元素保持相同的样式。

B). 只需让输入转到两行，但使用媒体查询确保它看起来像是一列。

A）。

这是A）增加的css。 （两个例子的HTML保持不变。）

.centerForm {
    text-align: center; /*This was here before*/
    min-width: 400px; /*This is the only added style*/
}

这是一个可编辑的JsFiddle of A).

B）。

这是B）增加的css。

@media (max-width: 400px) { /*applies when screen is less than 400px*/
    .centerForm-row input {
        display: block; /*this forces it on to multiple lines preemptively*/
        margin: 0 auto; /*this centers display block elements*/
        margin-top: 15px; /*this is just for style*/
    }
    .centerForm-row input:first-child {
        margin-top: 0; /*just for style*/
        margin: 0 auto; /*must be here to override margin-left: 0 from the rule .centerForm-row input:first-child above*/
    }

}

这是一个可编辑的JsFiddle of B).

如果您还有其他问题，请再次发表评论。希望这有帮助。 ：）