# List-inline

The list-inline object simply displays a list of items in one line.

<div class="example">
    <ul class="gs-o-list-inline">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
```

## Delimited

Separates list items with a comma. This modifier requires that there is no whitespace between list items.

<div class="example">
    <ul class="gs-o-list-inline gs-o-list-inline--delimited">
        <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-inline gs-o-list-inline--delimited">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>
```

## Divided

Separates list items with a vertical line. This modifier requires that there is no whitespace between list items.

<div class="example">
    <ul class="gs-o-list-inline gs-o-list-inline--divided">
        <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-inline gs-o-list-inline--delimited">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>
```

## Spaced

Spaces list items out even further.

<div class="example">
    <ul class="gs-o-list-inline gs-o-list-inline--spaced">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

```html
<ul class="gs-o-list-inline gs-o-list-inline--spaced">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
```

<link rel="stylesheet" href="https://bbc.github.io/grandstand/assets/css/grandstand-latin-flexbox-4.1.0.enhanced.css">