Shortcut to apply an inline styling to <li> elements on a <ul>or <ol>, reset margins and paddings and delete list styles.

This is a common behavior for navigation, menus, tabs and every horizontal display of a list of items.

It also uses flex to collapse unwanted whitespace generated by inline-block elements. Older browsers will fallback to the default behavior.

Example

ul.inline-list {
    @include inline-list();
}

<ul class="inline-list">
    <!-- Let's put some color and spacing to tell the difference between items -->
    <li class="p quarter-gutter bg-state-success">Item 1</li>
    <li class="p quarter-gutter bg-state-error">Item 2</li>
    <li class="p quarter-gutter bg-state-warning">Item 3</li>
    <li class="p quarter-gutter bg-base-primary">Item 4</li>
</ul>

• Item 1
• Item 2
• Item 3
• Item 4

Reference

Fighting the space between inline block elements