Compass Horizontal List

Easy mode using simple descendant li selectors:

ul.nav
  +horizontal-list

Advanced mode: If you need to target the list items using a different selector then use +horizontal-list-container on your ul/ol and +horizontal-list-item on your li. This may help when working on layouts involving nested lists. For example:

ul.nav
  +horizontal-list-container
  > li
    +horizontal-list-item

This file can be imported using: @import "compass/typography/lists/horizontal-list"

Imports

Bullets – Mixins for managing list bullets.
Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Clearfix – Mixins for clearfixing.
Float – Mixins for cross-browser floats.
Reset – Mixins for resetting elements (old import).

Mixins

view source

horizontal-list-container

=horizontal-list-container
  +reset-box-model
  +clearfix

@mixin horizontal-list-container {
  @include reset-box-model;
  @include clearfix;
}

Can be mixed into any selector that target a ul or ol that is meant to have a horizontal layout. Used to implement +horizontal-list.

view source

horizontal-list-item($padding, $direction)

=horizontal-list-item($padding: 4px, $direction: left)
  +no-bullet
  white-space: nowrap
  +float($direction)
  @if $padding
    padding:
      left: $padding
      right: $padding
    &:first-child #{if(support-legacy-browser("ie", "6", $threshold: $css-sel2-support-threshold), ", &.first", "")}
      padding-#{$direction}: 0
    &:last-child
      padding-#{opposite-position($direction)}: 0
    @if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold)
      &.last
        padding-#{opposite-position($direction)}: 0

@mixin horizontal-list-item($padding: 4px, $direction: left) {
  @include no-bullet;
  white-space: nowrap;
  @include float($direction);
  @if $padding {
    padding: {
      left: $padding;
      right: $padding;
    };
    &:first-child #{if(support-legacy-browser("ie", "6", $threshold: $css-sel2-support-threshold), ", &.first", "")} {
      padding-#{$direction}: 0;
    }
    &:last-child {
      padding-#{opposite-position($direction)}: 0;
    }
    @if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) {
      &.last {
        padding-#{opposite-position($direction)}: 0;
      }
    }
  }
}

Can be mixed into any li selector that is meant to participate in a horizontal layout. Used to implement +horizontal-list.

:last-child is not fully supported see http://www.quirksmode.org/css/contents.html#t29 for the support matrix

IE8 ignores rules that are included on the same line as :last-child see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details

Setting $padding to false disables the padding between list elements

view source

horizontal-list($padding, $direction)

=horizontal-list($padding: 4px, $direction: left)
  +horizontal-list-container
  li
    +horizontal-list-item($padding, $direction)

@mixin horizontal-list($padding: 4px, $direction: left) {
  @include horizontal-list-container;
  li {
    @include horizontal-list-item($padding, $direction);
  }
}

A list(ol,ul) that is layed out such that the elements are floated left and won’t wrap. This is not an inline list.

Setting $padding to false disables the padding between list elements