html - 对齐联系表中的输入框 7

Question

我正在尝试在 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>

Answer 1

您需要为输入字段提供父级。

然后一旦它们有了父级，您就可以给标签(文本)和输入(文本字段)一定的宽度，使它们占据表单宽度的 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