Clever Geek Handbook

Align dropdown and input box in HTML5 and CSS3

I have a dropdown in which the list is selected and entered into an input field. However, the dropdown is not correctly aligned with the input field. I have provided the codes below.

below is HTML 5 code

<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>
Run codeHide result


below is the css code

.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;
}
Run codeHide result


but anytime when i run the code i get the following alignment

the drop down list is out of line with the input box

Now how to align the dropdown and the input field so they match.

+3


source to share


3 answers


If I understand correctly, you want the input to be on the next line, which will present the list below:

.form label {
    display:block;}


or

.form input {
    display:block;}
0


source


I don't think the tag <li>

belongs to your html, so I removed it from my answer. If you want to align the results with the input field, they must be in the same div. I've simplified here and just put your input field inside a div #results

. Floating that div to the left will align its inner content the way I think you want.



.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;
    border: 1px solid #c0c0c0;
    float: left;
}

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

        
        
        
      

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


0


source


I agree with Eric, but for a smoother effect, I suggest commenting width

both border

on #results

and changing form .item

to#results .item

Janmaria

.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;*/
    /*border: 1px solid #c0c0c0;*/
    float: left;
}


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

        
        
        
      

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


0


source






More articles:


All Articles