have proper spacing between items in the navbar regardless of word size - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar Item

Description

have proper spacing between items in the navbar regardless of word size

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">
.html<!--from  w ww  .  ja  v  a 2s .c o  m-->
 {
   background-color:Chartreuse;
}

body
 {
   margin:0;
   padding:0;
}

.header
 {
   width:81%;
   margin:auto;
   padding:0;
   display:flex;
}

#banner
 {
   height:201px;
   width:81%;
   background-color:yellow;
}

#navbar
 {
   background-color:blue;
   height:29px;
}

.menu
 {
   list-style-type:none;
}

.nb_item
 {
   display:inline-block;
   padding:0px 11px;
   color:pink;
   margin:auto;
   text-align:center;
}

.nb_item:hover
 {
   color:OrangeRed;
}

#comt_menu
 {
   list-style-type:none;
}

#abtus_menu
 {
   list-style-type:none;
}

#rgstr_menu
 {
   list-style-type:none;
}

#evnt_menu
 {
   list-style-type:none;
}

.menu li
 {
   display:inline;
}
</style> 
 </head> 
 <body> 
  <title>Lorem ipsum</title> 
  <div class="header" id="banner"></div> 
  <div class="header" id="navbar"> 
   <div class="nb_item">
     Lorem 
   </div> 
   <div class="nb_item">
     Lorem ipsu 
   </div> 
   <div class="nb_item">
     Lorem ipsu 
   </div> 
   <div class="nb_item">
     Lorem ipsum 
   </div> 
   <div class="nb_item">
     Lorem ipsum 
   </div> 
   <div class="nb_item">
     Lorem ip 
   </div> 
   <div class="nb_item">
     Lorem ipsu 
   </div> 
   <div class="nb_item">
     Lorem ipsum 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials