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％，然后优雅地对齐。 / p>

这是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%;
}

最后，小提琴：Demo

以联系表格7对齐输入框

1 个答案: