如何将换行的项目符号列表项目与其第一行对齐？

将项目符号项目的第二行与第一行对齐

当项目符号列表项目跨越多行时，通常需要换行与第一行对齐，而不是出现在第一行下方

解决方案：

要实现这种对齐方式，请将项目符号分成一个单独的 div，并将项目符号和文本都包装在容器 div 中：

.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;
}

<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>

在此示例中：

• container-div 提供了额外的padding 为项目符号创建边距。
• 项目符号使用position:absolute 绝对定位在container-div 内。
• 文本放置在container-div 内的row2 div 中。

此方法可确保项目符号项目的换行符与第一行对齐。

以上是如何将换行的项目符号列表项目与其第一行对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！