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

Question

我有一个下拉列表，其中选择了一个列表并将其输入到输入框中。但是，下拉列表未与输入框正确对齐。我在下面展示代码。

下面是 HTML 5 代码

<form class="form" action="put.php" method="post" name="access_form">
<li>
     <label for="firstname">First Name</label>
      <input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required />
     <div id="results">
	<div class="item">abc</div>
	<div class="item">def</div>
	<div class="item">hij</div>
</div>

</li>
</form>

下面是css代码

.form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}

.form input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}



#results {
	width: 204px;
        display: none;
	display: absolute;
	border: 1px solid #c0c0c0;
}

#results .item {
	padding: 3px;
	font-family: Helvetica;
	border-bottom: 1px solid #c0c0c0;
}

但只要我运行代码，我就会得到以下对齐方式

现在，如何对齐下拉框和输入框以使其相互匹配。

Answer 1

如果我没理解错的话，你希望输入在下一行，与下面的列表对齐:

.form label {
    display:block;}

或

.form input {
    display:block;}