Inline Lists

This simple construct creates a horizontal list of links, like in a footer. Use it when you want more control than spaces between links.



Basic

You can create an inline list using minimal markup.

HTML

<ul class="inline-list"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul>

Rendered HTML


Customize with Sass

Lists can be easily customized using our Sass variables.

SCSS

$include-html-inline-list-classes: $include-html-classes; // We use this to control the margins and padding of the inline list. $inline-list-top-margin: 0; $inline-list-opposite-margin: 0; $inline-list-bottom-margin: rem-calc(17); $inline-list-default-float-margin: rem-calc(-22); $inline-list-default-float-list-margin: rem-calc(22); $inline-list-padding: 0; // We use this to control the overflow of the inline list. $inline-list-overflow: hidden; // We use this to control the list items $inline-list-display: block; // We use this to control any elments within list items $inline-list-children-display: block;

Semantic Markup With Sass

You can create your own list using our Sass mixins.

Basic

You can use the inline-list() mixin like so:

SCSS

.custom-list-class { @include inline-list; }

HTML

<ul class="custom-list-class"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/inline-lists";




Building Blocks Using Inline Lists


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »