Navigation bar entire width spaced items evenly - 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

Navigation bar entire width spaced items evenly

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">
ul.nav {<!--   w  w w .  j  a  v  a2  s.co m-->
   width:100%;
   margin:0 auto;
   padding:0;
   list-style:none;
   background-color:Chartreuse;
   text-align:center;
   font-family:sans-serif;
}

.nav li {
   display:inline-block;
   width:34%;
   margin:0;
   padding:0;
}

.nav a {
   text-align:center;
   padding:13px 0 14px 0;
   margin:0;
   border-left:2px solid yellow;
   border-right:2px solid blue;
   display:block;
}

.nav a:hover {
   background:pink;
   border:none;
}

ul.nav li:first-child a {
   border:none;
}

ul.nav li:last-child a {
   border:none;
}
</style> 
 </head> 
 <body> 
  <ul class="nav"> 
   <li> <a href="#">Lorem </a> </li> 
   <li> <a href="#">Lorem </a> </li> 
   <li> <a href="#">Lore</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials