javascript - 列表上的自动换行

Question

假设我从 api 获取信息并将其作为列表显示在我的 html View 中，但每个值都在一个框中。

例如:

    <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

听起来你应该利用 2 === 0 的模数。为 .break 创建一个类并添加适当的类让它中断。您可能不想使用 ul你可能想使用 :after使用 display:block; content:"" 添加 div 的选择器属性(property)。 <li>标签应该是 inline-block如果你去ul路线。

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