可以在该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;
}

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

Answer 2

作为flexbox的狂热者，我建议将其用于您的布局：

h2 {
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content,
.new-content {
  display: flex;
}

.main-content{
  flex-grow: 1; /* Take the most possible vertical space */
}

.container .col {
  flex-basis: 25%;
}

.main-content .col:not(:last-child) {
  border-right: 2px solid black;  
}

html, body {
  margin: 0;
}

<div class="container">
  <h2>All Training Courses</h2>
  <div class="main-content">
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
  </div>
  <div class="new-content">
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
  </div>
</div>