[DEPRECATED] [go to intuitcss/inuitcss]
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



The List-inline object simply displays a list as one horizontal row.


inuitcss’ List-inline object depends on one other inuitcss module:

If you install the List-inline object using Bower, you will get these dependencies at the same time. If not using Bower, please be sure to install and @import these dependencies in the relevant way.


The recommended installation method is Bower, but you can install the List-inline module via a Git Submodule, or copy and paste.

Install using Bower:

$ bower install --save inuit-list-inline

Install using npm:

$ npm install --save inuit-list-inline

Once installed, @import into your project in its Objects layer:

@import "bower_components/inuit-list-inline/objects.list-inline";

Install as a Git Submodule

$ git submodule add git@github.com:inuitcss/objects.list-inline.git

Once installed, @import into your project in its Objects layer:

@import "objects.list-inline/objects.list-inline";

Install via file download

The least recommended option for installation is to simply download _objects.list-inline.scss into your project and @import it into your project in its Objects layer.


Basic usage of the List-inline object uses the required classes:

<ul class="list-inline">

The only valid children of the .list-inline node are lis.


Other, optional classes can supplement the required base classes:

  • .list-inline--delimited: add a character to delimit list items.

For example:

<ul class="list-inline  list-inline--delimited">

If you wish to completely remove the whitespace between items, omit the closing </li> tag:

<ul class="list-inline">