Javascript 自动打断列表上的行

假设我从一个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>

我想做的是在两个值之间添加一条自动换行符。无论值的数量有多大，每两条记录我都需要一条换行符来获得如下内容：

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

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

一个
两个


三
四


五

我该怎么做？我尝试过使用

空白

，但没有成功。此外，我还尝试用引导卡限制空间，虽然效果不错，但第三个框（以及下一个框）的页眉与前两个框的页脚保持非常接近

我正在使用AngularJs和Javascript

---

希望您能帮助我。

听起来您应该利用模数2==0。为

.break

创建一个类，并添加相应的类以使其中断。您可能不想使用

ul

您可能想使用

:after

选择器添加带有

显示：块的div；内容：“

属性。如果您选择

ul

路线，则

标记应为

内联块

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

{{{list.key}

听起来您应该使用模数2==0。为

.break

创建一个类，并添加相应的类以使其中断。您可能不想使用

ul

您可能想使用

:after

选择器添加带有

显示：块的div；内容：“

属性。如果您选择

ul

路线，则

标记应为

内联块

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

{{{list.key}

在

标签上使用

$index

角度变量和

ng if

，如下所示：

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

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

{{item}}

正如在一些评论中指出的那样，MDN只允许列表中的嵌套列表，而技术上不允许

---

在

标签上使用
$index
角度变量和
ng if
，如下所示：

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

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



{{item}}


正如在一些评论中指出的那样，MDN只允许列表中的嵌套列表，而技术上不允许

您确定需要插入

元素，还是只想插入空格？如果是前者，您可能需要重新考虑您的策略，因为此内容不允许直接在内部。如果是后者，您可以使用CSS，类似于
：n子元素（偶数）
。您确定需要插入

元素，还是只想插入空格？如果是前者，您可能需要重新考虑您的策略，因为此内容不允许直接在内部。如果是后者，您可以使用CSS，类似于
：nth child（偶数）
@georgeawg，使用
创建列表项也同样有效，并且似乎符合MDN标准更新answer@georgeawg，使用
创建列表项的工作原理也一样，并且似乎符合MDN标准。-最新答案