list: inline

De-style a list and inline its items.

use-name

scut-list-inline

type

mixin, with default-values placeholder

arguments

$space

default

false

Spacing to separate the inline list items.
$no-margin

default

true

If true, top and bottom margins will be removed from the list.

Use an inline list if you don't mind that your list items might be spaced out a little extra, like inline words. If you need them flush, with no interstitial space, try a floated list.

Only the list's immediate children are inlined (ul > li): Scut does not presume to know what you might plan to do with sub-lists.

example

SCSS

.eg-list-inline-1 {
  @include scut-list-inline;
  // or @extend %scut-list-inline;
  }
.eg-list-inline-2 {
  @include scut-list-inline(1em, false);
}

compiled CSS

.eg-list-inline-1 {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.eg-list-inline-1 > li {
  display: inline-block;
}

.eg-list-inline-2 {
  list-style-type: none;
  padding-left: 0;
}
.eg-list-inline-2 > li {
  display: inline-block;
}
.eg-list-inline-2 > li + li {
  margin-left: 1em;
}

Result

list item 1
list item 2
list item 3

list item 1
list item 2
list item 3