html - 用于定位输入的 CSS 样式

Question

我想制作一个页面的一部分，其中有五个 input[type=text]，但我需要以特定方式放置它们，如下图所示:

我尝试用 display 属性做一些事情，但没有成功。

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

Answer 1

看起来您只是想让您的表单以某个元素为中心。居中可以很容易地完成，因为输入元素默认为 display: inline-block 所有你需要的是他们的容器有 text-align center 让他们居中。 p>

这是一些示例代码。你可以把容器做得再大，它也会居中。您也可以调整边距

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). 使您的容器具有最小宽度。这会强制水平滚动条的宽度变小，但会使您的元素保持相同的样式。

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).

如果还有什么问题就再评论吧。希望这有所帮助。 :)