Автоматический разрыв строк в списке

Question

Скажем, я получаю информацию из API и показываю ее в моем html-виде в виде списка, но каждое значение внутри поля.

За пример:

    <ul ng-repeat="list on lists" class="inline">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>

В CSS:

li {
    height: 100px;
    width: 100px;
    border: 1px solid red;
}

То, что я хочу сделать, это добавить автоматическую разрывную линию между двумя значениями. Независимо от количества значений, каждые две записи мне нужно, чтобы в строке разрыва было что-то вроде этого:

<ul ng-repeat="list on lists">
            <li>One</li>
            <li>Two</li>
            <br>
            <li>Three</li>
            <li>Four</li>
            <br>
            <li>Five</li>
        </ul>

Как я могу это сделать? Я пытался использовать white-space безуспешно. Кроме того, я попытался ограничить пространство с помощью загрузочной карты, и это немного работает, но заголовок третьего (и следующих полей) остается очень близко к нижнему колонтитулу первых двух.

Я использую AngularJs и Javascript.

Надеюсь, вы сможете мне помочь.

Answer 1

Используйте угловую переменную $index и ng-if на теге <li> следующим образом:

    <ul ng-repeat="item in data">
        <li ng-if="$index !== 0 && $index % 2 === 0">&nbsp;</li>
        <li>{{item}}</li>
    </ul>

Как указывалось в нескольких комментариях, MDN разрешает только вложенные списки внутри списков, а не технически <br>.

скрипка

Answer 2

Похоже, вы должны использовать модуль 2 === 0. Создайте класс для .break и добавьте соответствующий класс, чтобы он сломался. Возможно, вы не захотите использовать ul, вы можете использовать селектор :after, чтобы добавить div со свойством display:block; content:"". Теги <li> должны быть inline-block, если вы идете по маршруту ul.

<ul ng-repeat="list on lists" class="inline">
    <li ng-class="{'break': $index % 2 === 0 }">{{ list.key}}</li>
</ul>