- Horizontal arrangement. By using the .wui-inline-list different elements can be arranged next to each other and have the same predefined spacing.
- Margins. To ensure that the spacing is not falsified from the inside out, the .wui-inline-list__item must not contain any margins.
- Paddings. Normally the padding of an element can be untouched.
Size modifier
There are 4 modifiers to set the width of the gap between the wui-inline-list__items.
- .wui-inline-list--lg
- .wui-inline-list--md (default)
- .wui-inline-list--sm
- .wui-inline-list--zero
Due to the definition of inline-block elements, there will be a small gap between the elements by default. To work around this we manipulate the font sizes of the inline-lists. This should be considered if no font size is defined for the particular component.
We use the small-modifier, for example, whenever we use small Buttons. You can find them for instance at widgets or content-tiles. In these cases we would use the modifier .wui-inline-list--sm.
```html
```
Sticky header
The sticky header is probably one of the most common examples how and when to use the .wui-inline-list
```html
```
Sections
The two buttons "previous" and "next" have no gap between each other. The pagination is a button group and counts as one element in itself and is therefore not divided into different wui-inline-list__items.
By the way, within a .wui-bs-panel the margins of a pagination should be the same to all sides. That's why we use a negative margin to the left or right.
Modal footer
Using the utils "pull-left" and "pull-right" the whole wui-inline-list is moved to the desired position. The individual elements of the wui-inline-list should not be floated.
When floating the wui-inline-list the parent element probably needs a .clearfix ;)
```html
```