Align Search Box and Search Button horizontally with the Navigation Links in HTML5

How do I align horizontally the search box and button with the navigation links in HTML5. I have added the search box to the navigation bar but it rest below the navigation links.

below is a picture of the problem..
The search box located at the buttom

Below is the code for the navigation bar

 <div class="navigation" id="navigation">   
 <nav>
<ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="/data_centre/register.php">Booking</a></li> 
        <li><a href="/data_centre/display_user.php">Display User</a></li> 
       <form>
  <input name="q" id="search-bar" type="search" placeholder="Type to Search">
  <input id="search-button" type="submit" value="Find">
</form>
    
   </ul>

    </nav>
</div>

Below is the code for the navigation bar css

 nav {           
      display:block;
} 

nav {
    margin:0;
    clear:both;
    text-align:left;
    widht:10px;
    padding:25px;
    background-color:#68b12f;
    border-radius: 5px;
    background: linear-gradient(top, #68b12f, #50911e);
    border: 2px solid #509111;
    border-bottom: 2px solid #5b992b;
    overflow:hidden;
}


nav ul{

padding:0;
margin:0;

}



nav ul li{

display: inline-block;
list-style-type:none;

}


nav {
    margin:0;
    clear:both;
    text-align:left;
    widht:10px;
    padding:25px;
    background-color:#68b12f;
    border-radius: 5px;
    background: linear-gradient(top, #68b12f, #50911e);
    border: 2px solid #509111;
    border-bottom: 2px solid #5b992b;
    overflow:hidden;
}


nav ul{

padding:0;
margin:0;

}



nav ul li{

display: inline-block;
list-style-type:none;

}

below is the code for the search box and button

#search-bar{

border:1px solid blue;
padding: 5px;
border-radius:5px;

}

#search-button{
border:1px solid blue;
padding: 5px;
border-radius:5px;

}

Just want to align navigation links and search box and find button horizontally.


Source: html5

Leave a Reply