Source on Github

Compass Inline-Block List

Easy mode using simple descendant li selectors:

ul.nav
  +inline-block-list

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

ul.nav
  +inline-block-list-container
  > li
    +inline-block-list-item

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

Imports

  1. Bullets – Mixins for managing list bullets.
  2. Inline Block – Declare an element inline block for all browsers.
  3. Float – Mixins for cross-browser floats.
  4. Horizontal List – Float a list so it appears horizontally.

Mixins

view source 

=inline-block-list-container
  +horizontal-list-container

@mixin inline-block-list-container {
  @include horizontal-list-container;
}

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

view source 

=inline-block-list-item($padding: false)
  +no-bullet
  +inline-block
  white-space: nowrap
  @if $padding
    padding:
      left: $padding
      right: $padding

@mixin inline-block-list-item($padding: false) {
  @include no-bullet;
  @include inline-block;
  white-space: nowrap;
  @if $padding {
    padding: {
      left: $padding;
      right: $padding;
    };
  }
}

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

view source 

=inline-block-list($padding: false)
  +inline-block-list-container
  li
    +inline-block-list-item($padding)

@mixin inline-block-list($padding: false) {
  @include inline-block-list-container;
  li {
    @include inline-block-list-item($padding);
  }
}

A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.