gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:26:29 24 4
gpt4 key购买 nike

我正在将数据渲染到一个 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();

最佳答案

您可以尝试以下方法:

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

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

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

关于html - 是否可以在这个 div 中画线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55053734/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com