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
- Bullets – Mixins for managing list bullets.
- Inline Block – Declare an element inline block for all browsers.
- Float – Mixins for cross-browser floats.
- Horizontal List – Float a list so it appears horizontally.
Mixins
view sourceinline-block-list-container
=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
.
inline-block-list-item($padding)
=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
.
inline-block-list($padding)
=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.