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]

• Add in the horizontal mixin.

  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; }

• See how a horizontal list looks.
  

• Customize padding.

  ​	​ul​.horiz {
  ​	​@include​ horizontal-list(25px); }

Related Tasks

• Task 27, ​Sprucing Up Your Lists​