Html 可以在这个分区内画线吗？

我正在将数据渲染到一个div中，我想看看是否可以使用CSS在四列之间创建三行。我使用一个div来正确显示数据。如果我使用单独的列（然后对每个列使用

右边框：2px纯黑

），那会很好，但我喜欢div随着添加更多项而扩展的方式，所以我希望使用单个div

我已经加入了一个可以更好地解释我想要实现的目标的例子

HTML代码段： JS代码段：

从“/test.json”导入testjson；
函数loadAllCourses（）{
让jsonRes=testjson.d.results.map（函数（val）{
返回{
“标题”：val.标题
}
});
让allTitles=jsonRes；
对于（变量i=0；i”+所有标题[i]。标题+”）
};
}//--------------加载所有课程
加载所有课程（）；

您可以尝试以下方法：

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

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

---

不确定这是否是您的意思。

作为flexbox的狂热爱好者，我建议您在布局中使用它：

h2{
文本对齐：居中；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
.主要内容，
.新内容{
显示器：flex；
}
.主要内容{
flex grow:1；/*占用尽可能多的垂直空间*/
}
.container.col{
弹性基准：25%；
}
.main content.col:not（：最后一个子项）{
右边框：2倍纯黑；
}
html，正文{
保证金：0；
}

所有培训课程

一个
两个
三


一个
两个
三


一个
两个
三


一个
两个
三


一个
两个
三


一个
两个
三


一个
两个
三


一个
两个
三

鉴于您可能正在呈现表格数据，使用

是否有意义？或者你想利用CSS

display:table

？相信我，我会使用Flexbox，但我的项目主要用于IE，它与IE不完全兼容。@Bodrov我想你至少可以把事情缩短到

。所有课程ul:not（：last child）li{border right:2px solid black；}

.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%;
}

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();

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

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