如何在项目符号列表中正确缩进换行文本？

如何缩进换行的项目符号列表项的第二行

使用项目符号列表时，有时列表项可能会很长它换行到下一行。默认情况下，包裹的部分将与行的开头对齐，从而产生不整洁的外观。为了解决这个问题，我们希望包裹的部分与项目符号项目的第一行对齐。

在这个问题中，用户面临同样的问题。他们当前的代码（在“问题内容”部分中提供）未实现所需的缩进。建议的解决方案是将项目符号项目分成两个单独的 div：一个用于项目符号，另一个用于文本。然后将这些 div 包装在容器 div 中。

这是使用建议方法改进的代码片段：

CSS

.container-div {
  padding-left: 20px;
  overflow: hidden;
  max-width: 500px;
}

.red-square-5 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: 0.5em;
  background: #f00;
}

HTML

<div class="container-div">
  <div class="red-square-5"></div>
  <div class="row2">
    Long long long long long long long long long long long long long long long long long long long long long long long long long title
  </div>
</div>

在此更新的代码中，红色代表项目符号的正方形绝对定位并与文本的第一行垂直对齐。然后长文本自然流动，与容器 div 的左边缘对齐。这种方法成功地实现了项目符号项目的包裹部分所需的缩进。

以上是如何在项目符号列表中正确缩进换行文本？的详细内容。更多信息请关注PHP中文网其他相关文章！