在聯系表格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

您需要為輸入字段賦予父項。

然后，一旦他們有了父母，您就可以給label（text）和input（text field）提供一定的寬度，以使其占據表單寬度的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%;
}

最后，擺弄： 演示