对齐输入框的联系表格7

问题描述：

我想对齐wordpress中联系表单7的输入框。目前他们错开了。我能做些什么垂直对齐。对齐输入框的联系表格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：

这里是CSS：

#contact { 
    width: 50%; 
} 

#contact input, #contact label { 
    display: inline-block; 
} 

#contact label { 
    width: 30%; 
} 

#contact input { 
    width: 65%; 
}

最后，小提琴：Demo

对齐输入框的联系表格7

相关推荐