<div class="item" th:each="event : ${events}"> <img class="ui avatar image" style="width: 45px;height: 45px" th:src="${event.data.headerUrl}" > <div class="content"> <div class="ui teal header" th:text="${event.data.nickname}" style="display: inline-block;">小圳</div> <span style="display: inline-block;">回复了你的评论</span> <div class="description" th:text="${event.data.content}">点点关注不迷路</div> <a href="#"><span>博客标题</span></a> </div> </div> 如何设置每个评论之间有一点点距离
时间: 2023-07-02 09:11:34 浏览: 39
您可以使用 CSS 中的 margin 或 padding 属性来为每个评论添加间距,例如:
```
.item {
margin-bottom: 10px; /* 添加底部间距 */
}
```
这将为每个评论底部添加 10px 的间距。您可以根据需要调整间距大小。
相关问题
<div class="ui segment"> <div class="ui relaxed divided list" style="height: 500px; overflow: scroll;"> <div class="item" th:each="event : ${events}"> <img class="ui avatar image" style="width: 45px;height: 45px" th:src="${event.data.headerUrl}" > <div class="content"> <a class="header" th:text="${event.data.nickname}">小圳</a> <span>回复了你的评论</span> <div class="description" th:text="${event.data.content}">点点关注不迷路</div> </div> </div> </div> </div> 如何使 小圳 和 回复了你的评论 在一行啊
可以将小圳和回复了你的评论的标签都放在同一个div中,加上 "inline" 或 "inline-block" 的样式,如下所示:
```html
<div class="ui segment">
<div class="ui relaxed divided list" style="height: 500px; overflow: scroll;">
<div class="item" th:each="event : ${events}">
<img class="ui avatar image" style="width: 45px;height: 45px" th:src="${event.data.headerUrl}">
<div class="content">
<div>
<a class="header" th:text="${event.data.nickname}" style="display: inline-block;">小圳</a>
<span style="display: inline-block;">回复了你的评论</span>
</div>
<div class="description" th:text="${event.data.content}">点点关注不迷路</div>
</div>
</div>
</div>
</div>
```
这里将小圳和回复了你的评论的标签都放在了一个div中,并将这个div的样式设置为 "display: inline-block;",这样它们就能在同一行显示了。
<div class="item" th:each="event : ${events}"> <img class="ui avatar image" style="width: 45px;height: 45px" th:src="${event.data.headerUrl}" > <div class="content"> <div class="ui teal header" th:text="${event.data.nickname}" style="display: inline-block;">小圳</div> <span style="display: inline-block;">回复了你的评论</span> <div class="description" th:text="${event.data.content}">点点关注不迷路</div> <a href="#"><span>博客标题</span></a> </div> </div> 如何在右侧加上时间和删除图标
您可以在 `content` 元素内部添加一个新的 `div` 元素,然后在该元素中添加时间和删除图标。例如:
```
<div class="content">
<div class="ui teal header" th:text="${event.data.nickname}" style="display: inline-block;">小圳</div>
<span style="display: inline-block;">回复了你的评论</span>
<div class="description" th:text="${event.data.content}">点点关注不迷路</div>
<a href="#"><span>博客标题</span></a>
<div class="extras" style="float: right;">
<span>2021-10-15 14:30</span>
<i class="trash icon"></i>
</div>
</div>
```
在上面的例子中,我们添加了一个名为 `extras` 的新的 `div` 元素,并将其设置为右浮动。在该元素内部,我们添加了一个时间标签和一个删除图标。您可以在 CSS 中进一步调整这些元素的样式和位置。