Navigation Bar with ul and icons on left and right - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav bar alignment

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

Description

Navigation Bar with ul and icons on left and right

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">
body {<!--from  w  w  w  .j  av  a2  s  . com-->
   margin:0;
}

header {
   overflow:hidden;
   text-align:center;
   background:Chartreuse;
}

.opcoes li {
   display:inline;
}

.opcoes li:after {
   content:'|';
   padding:0 9px;
}

.opcoes li:last-child:after {
   content:none;
}

.wifi {
   float:left;
   padding:14px 9px;
}

.flags {
   float:right;
   padding:0 9px;
}

.opcoes, .flags ul, .flags li {
   display:inline-block;
}
</style> 
 </head> 
 <body> 
  <header> 
   <div class="wifi"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Wi-Fi"> 
   </div> 
   <div class="opcoes"> 
    <ul> 
     <li> <a href="#">Lorem </a> </li> 
     <li> <a href="#">Lore</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
     <li> <a href="#">Lorem i</a> </li> 
    </ul> 
   </div> 
   <div class="flags"> 
    <ul> 
     <li> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="English"> </li> 
     <li> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Portugu?"> </li> 
    </ul> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials