时间戳

首页 > 解决方案 > 列表上的自动换行

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>

在 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。

希望您能够帮助我。

标签： javascriptcssangularjs

解决方案

听起来您应该使用 2 === 0 的模数。为它创建一个类.break并添加适当的类以使其中断。您可能不想使用ul您可能想使用:after选择器来添加具有display:block; content:""属性的 div。如果您确实走这条路，<li>标签应该是。inline-blockul

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

推荐阅读