如何在項目符號清單中正確縮排換行文字？

如何縮排換行的項目符號清單項目的第二行

使用項目符號清單時，有時清單項目可能會很長它換行到下一行。預設情況下，包裹的部分將與行的開頭對齊，從而產生不整潔的外觀。為了解決這個問題，我們希望包裹的部分與項目符號項目的第一行對齊。

在這個問題中，使用者面臨同樣的問題。他們當前的程式碼（在“問題內容”部分中提供）未實現所需的縮排。建議的解決方案是將項目符號項目分成兩個單獨的 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中文網其他相關文章！