html - 是否可以在这个 div 中画线？

Question

我正在将数据渲染到一个 div 中，我想看看我是否可以使用 CSS 在四列之间创建三行。我正在使用单个 div 以使数据正确显示。虽然如果我使用单独的列会很好(然后我会对每个列执行 border-right: 2px solid black)，但我喜欢 div 随着添加更多元素而扩展的方式，所以我想要坚持使用单个 div。

我添加了一个 screencap这应该更好地解释我想要实现的目标。

HTML 片段:

<div class="all-training">

    <h2>All Training Courses</h2>

    <div class="row">
        <div class="col">
          <ul class="all-courses-ul"></ul> 
        </div>
    </div>

</div>

CSS 片段:

.all-courses-ul {
    display: block;
}

.all-courses-ul li {
    display: inline-block;
    font-size: 15px;
    list-style-type: none;
    padding-bottom: 30px;
    text-align: left;
    width: 25%;
}

JS 片段:

import testjson from './test.json';

    function loadAllCourses() {
        let jsonRes = testjson.d.results.map(function(val) {
            return {
                "Title": val.Title
            }
        });

        let allTitles = jsonRes;
        for (var i = 0; i < allTitles.length; i++) {
            $(".all-courses-ul").append("<li>" + allTitles[i].Title + "</li>")
        };

    } // ------------------ loadAllCourses

    loadAllCourses();

Answer 1

您可以尝试以下方法:

    .all-courses-ul li {
      border-right: 2px solid #000;
}

.all-courses-ul:last-child li {
     border-right: 0;
}

不确定你是不是这个意思。