list: floated
view sourceDe-style a list and float its items.
- use-name
-
scut-list-floated - type
- mixin, with default-values placeholder
- arguments
-
-
$space- default
-
false
-
$dir- default
-
left
The
floatdirection. -
$no-margin- default
-
true
If
true, top and bottom margins will be removed from the list.
-
Float items to the left or to the right, with or without spacing between them.
Use a floated list instead of an inline list (see scut-list-inline) when you want your list items snuggled right next to each other.
Only the list's immediate children are floated (ul > li): Scut does not presume to know what you might plan to do with sub-lists.
example
SCSS
.eg-list-floated-1 {
@include scut-list-floated;
// or @extend %scut-list-floated;
}
.eg-list-floated-2 {
@include scut-list-floated(1em, $no-margin: false);
}
.eg-list-floated-3 {
@include scut-list-floated(2em, right);
}compiled CSS
.eg-list-floated-1 {
list-style-type: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.eg-list-floated-1:after {
content: "";
display: table;
clear: both;
}
.eg-list-floated-1 > li {
float: left;
}
.eg-list-floated-2 {
list-style-type: none;
padding-left: 0;
}
.eg-list-floated-2:after {
content: "";
display: table;
clear: both;
}
.eg-list-floated-2 > li {
float: left;
}
.eg-list-floated-2 > li + li {
margin-left: 1em;
}
.eg-list-floated-3 {
list-style-type: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.eg-list-floated-3:after {
content: "";
display: table;
clear: both;
}
.eg-list-floated-3 > li {
float: right;
}
.eg-list-floated-3 > li + li {
margin-right: 2em;
}
Result
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
Spacing to separate the floated list items.