prevent overlapping borders of list elements in an unordered list - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

prevent overlapping borders of list elements in an unordered list

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

#navigation_bar<!--from ww  w  .j av  a  2s.c  om-->
{
   overflow: hidden;
   list-style-type: none;
   padding-left:0px;
   width: 100%;
}
#navigation_bar li
{
   text-align: center;
   float: left;
   width: 33%;
   border-top:1px solid black;
   border-left:1px solid black;
   border-bottom:1px solid black;
}
#last{
   border-right:1px solid black;
}

      </style> 
 </head> 
 <body> 
  <ul id="navigation_bar"> 
   <li>Projection</li> 
   <li>Real-Time</li> 
   <li id="last">Cleanup</li> 
  </ul>  
 </body>
</html>

Related Tutorials