Reduce height of pipes in a horizontal menu


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



Copy this code and paste it in your HTML
  1. <head>
  2. ul {margin: 0; padding: 0; list-style: none; }
  3. ul#menu li { display: inline; float: left; margin-right: 10px; padding-right: 10px; border-right: 1px solid #000; }
  4. ul#menu li a { color: #000; line-height: 0.75em; } /* NB: line-height reduces pipe height */
  5. ul#menu li.last { border-right: none; }
  6. </style>
  7. </head>
  8. <body>
  9. <ul id="menu">
  10. <li ><a href="#" >Contact</a>
  11. <li><a href="#" >About</a>
  12. <li><a href="#" >Bookings</a>
  13. <li class="last" ><a href="#" >Terms</a>
  14. </ul>
  15. </body>
  16. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.