Javascript 在HTML5和CSS3中对齐下拉列表和输入框

我有一个下拉列表，其中一个列表被选中并输入到一个输入框中。但是，下拉列表未与输入框正确对齐。我在下面介绍代码

下面是HTML5代码

名字
abc
def
你好

如果我理解正确，您希望输入位于下一行，该行将与下面的列表对齐：

.form label {
    display:block;}

或

---

我认为

标记不属于您的html，因此我已将其从我的答案中删除。如果您想将结果与输入字段对齐，它们应该在同一个div中。我在这里进行了简化，只需将您的输入字段放在

#results

div中。将该div向左浮动将按照我认为您希望的方式对齐其内部内容

。表单标签{
宽度：150px；
利润上限：3倍；
显示：内联块；
浮动：左；
填充：3倍；
}
.表格输入{
高度：20px；
宽度：220px；
填充：5px 8px；
}
#结果{
宽度：204px；
边框：1px实心#C0C0；
浮动：左；
}
#结果.项目{
填充：3倍；
字体系列：Helvetica；
边框底部：1px实心#C0；
}

名字
abc
def
你好

我同意Erik的观点，但为了更流畅的效果，我建议在

#结果

上注释

宽度

和

边框

，并更改

表单。项

与

#结果。项

吉安玛利亚

。表单标签{
宽度：150px；
利润上限：3倍；
显示：内联块；
浮动：左；
填充：3倍；
}
.表格输入{
高度：20px；
宽度：220px；
填充：5px 8px；
}
#结果{
/*宽度：204px*/
/*边框：1px实心#C0C0*/
浮动：左；
}
#结果.项目{
填充：3倍；
字体系列：Helvetica；
边框：1px实心#c0c0；

名字
abc
def
你好

您能创建一个JSFIDLE吗？在没有父级的情况下使用

似乎是不好的做法。

#结果{margin left:156px；}

-（标签的宽度加上3倍左右的填充）-

.form input {
    display:block;}