Centering horizontally variable width menu


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



Copy this code and paste it in your HTML
  1. <div id="menu">
  2. <ul class="clearfix">
  3. <li><a href="#">Home</a></li>
  4. <li><a href="#">About</a></li>
  5. <li><a href="#">Products</a></li>
  6. <li><a href="#">Contact</a></li>
  7. </ul>
  8. </div>
  9.  
  10. <style>
  11. #menu {
  12. text-align: center;
  13. }
  14.  
  15. #menu li {
  16. display: inline;
  17. float: right;
  18. background: #000;
  19. padding: 5px 10px;
  20. float: left;
  21. margin: 0 1px 0 0;
  22. }
  23.  
  24. #menu ul {
  25. display: inline-block;
  26. *display: inline;
  27. }
  28.  
  29.  
  30.  
  31. #menu a {
  32. color: #fff;
  33. }
  34.  
  35.  
  36. .clearfix:after {
  37. content:".";
  38. display:block;
  39. height:0;
  40. clear:both;
  41. visibility:hidden;
  42. }
  43. .clearfix {display:inline-block;}
  44. /* Hide from IE Mac \*/
  45. .clearfix {display:block;}
  46. /* End hide from IE Mac */
  47. </style>

URL: http://jsfiddle.net/kuyabiye/FJBvj/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.