我想制作一个页面的一部分,其中有五个 input[type=text]
,但我需要以特定方式放置它们,如下图所示:
我尝试用 display
属性做一些事情,但没有成功。
此外,我不想使用粗略键入 left
和 top
属性。
最佳答案
看起来您只是想让您的表单以某个元素为中心。居中可以很容易地完成,因为输入元素默认为 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).
如果还有什么问题就再评论吧。希望这有所帮助。 :)
关于html - 用于定位输入的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22121404/