<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 中进一步调整这些元素的样式和位置。

相关问题

<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" 的样式，如下所示：

<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;"，这样它们就能在同一行显示了。

html 获取 <div class="avatar"></div> 动态更改此元素的背景图片

你可以使用 JavaScript 来获取到该元素，并且更改其背景图片。具体的做法如下：

<!-- HTML 代码 -->
<div class="avatar"></div>

// JavaScript 代码
const avatar = document.querySelector('.avatar'); // 获取元素
avatar.style.backgroundImage = 'url(图片地址)'; // 更改背景图片

其中，`querySelector` 方法可以根据 CSS 选择器获取到匹配的第一个元素，`style` 属性可以获取或设置元素的样式，`backgroundImage` 属性可以设置元素的背景图片。你只需要将上述代码中的“图片地址”替换成你想要设置的图片地址即可。

注意：在设置背景图片时，要将图片地址放在 `url()` 中。同时，如果图片地址是相对路径，则相对路径的起点是 HTML 文件所在的目录。