如何將換行的項目符號清單項目與其第一行對齊？

將項目符號項目的第二行與第一行對齊

當項目符號清單項目跨越多行時，通常需要換行與第一行對齊，而不是出現在第一行下方

解決方案：

要實現這種對齊方式，請將項目符號分成一個單獨的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中文網其他相關文章！