Advanced Search

Create a centred horizontal navigation

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <ul id="nav">
  2.   <li><a href="/">Home</a></li>
  3.   <li><a href="/about/">About</a></li>
  4.   <li><a href="/work/">Work</a></li>
  5.   <li><a href="/clients/">Clients</a></li>
  6.   <li><a href="/contact/">Contact</a></li>
  7. </ul>
  8.  
  9. #nav{
  10.   border:1px solid #ccc;
  11.   border-width:1px 0;
  12.   list-style:none;
  13.   margin:0;
  14.   padding:0;
  15.   text-align:center;
  16. }
  17. #nav li{
  18.   display:inline;
  19. }
  20. #nav a{
  21.   display:inline-block;
  22.   padding:10px;
  23. }

URL: http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.