put logo, navigation and search bar at one line - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav bar image

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav bar image

Description

put logo, navigation and search bar at one line

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div.header-wrapper-outer {
   width:100%;
   height:64px;
   background:Chartreuse;
}

div.logo, div.navigation-wrapper {
   display:inline-block;
}

div.navigation-wrapper {
   vertical-align:top;
}

form#search {<!--  ww  w.ja v  a  2 s  . c o  m-->
   display:inline-block;
}

div.logo {
   background-color:yellow;
   color:blue;
   height:64px;
   line-height:64px;
   width:201px;
   font-size:61px;
   text-align:center;
}

ul.nav li {
   display:inline;
   list-style:none;
}
</style> 
 </head> 
 <body> 
  <div class="header-wrapper-outer"> 
   <div clas="header-wrapper-inner"> 
    <div class="logo">
      Lore 
    </div> 
    <div class="navigation-wrapper"> 
     <ul class="nav"> 
      <li> <a href="#">Lorem</a> </li> 
      <li> <a href="#">Lorem ipsum</a> </li> 
      <li> <a href="#">Lorem</a> </li> 
      <li> <a href="#">Lorem i</a> </li> 
      <li> 
       <form id="search" name="search"> 
        <input type="text" name="q" placeholder="Search"> 
       </form> </li> 
     </ul> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials