我正在尝试在 wordpress 的联系表 7 中对齐输入框。此刻他们错开了。我该怎么做才能使它们垂直对齐。
<div style="background-color:green">
<div style="text-align: center;color:white">Heading</div>
<div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Name:</div>
<div style="position:relative; display:inline-block; ">[text* your-name]</div></div>
<div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Surname:</div>
<div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div>
<div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Email:</div>
<div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div>
</div>
最佳答案
您需要为输入字段提供父级。
然后一旦它们有了父级,您就可以给标签(文本)和输入(文本字段)一定的宽度,使它们占据表单宽度的 100% 或几乎 100%,然后优雅地对齐。
这是 html:
<div style="background-color:green">
<div style="text-align: center;color:white">Heading</div>
<form id="contact">
<label>Name:</label>
<input type="text" />
<label>Surname:</label>
<input type="text" />
<label>Email:</label>
<input type="text" />
</form>
</div>
这是CSS:
#contact {
width: 50%;
}
#contact input, #contact label {
display: inline-block;
}
#contact label {
width: 30%;
}
#contact input {
width: 65%;
}
最后,一个 fiddle :Demo
关于html - 对齐联系表中的输入框 7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21268975/