28 | Making Lists Horizontal |
As well as removing bullets and using your own icons, Compass gives you the cross-browser ease of making horizontal lists.
Horizontal lists are really useful for menus across the top of a page. They allow for easy navigation of a site.
You can also customize the padding between list points. Just type the padding you want after the horizontal list mixin. Pretty simple, no? Check out the Compass documentation for a couple of other things you can alter about lists.[11]
What To Do... |
compass/horlist.scss | |
| @import "compass/typography/lists/horizontal-list"; |
| |
| ul.horiz { |
| @include horizontal-list; } |
This compiles to:
| ul.horiz { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| overflow: hidden; |
| *zoom: 1; } |
| ul.horiz li { |
| list-style-image: none; |
| list-style-type: none; |
| margin-left: 0px; |
| white-space: nowrap; |
| display: inline; |
| float: left; |
| padding-left: 4px; |
| padding-right: 4px; } |
| ul.horiz li:first-child, ul.horiz li.first { |
| padding-left: 0; } |
| ul.horiz li:last-child { |
| padding-right: 0; } |
| ul.horiz li.last { |
| padding-right: 0; } |
| ul.horiz { |
| @include horizontal-list(25px); } |
Task 27, Sprucing Up Your Lists