」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 CSS 消除包裝無序列表中不需要的縮排?

如何使用 CSS 消除包裝無序列表中不需要的縮排?

發佈於2024-11-18
瀏覽:501

How to Eliminate Unwanted Indentation in Wrapped Unordered Lists with CSS?

使用CSS 刪除無序列表縮排

當無序列表中的文字環繞時,可能會出現不必要的縮進。要解決此問題,請嘗試以下步驟:

1.刪除縮排

刪除預設的內邊距和清單樣式縮排:

ul {
    padding: 0;
    list-style-type: none;  
}

2.縮小行高

如有必要,可透過將行高設為等於字體大小或稍小一些來縮小行高:

ul li {
    line-height: 1em;
}

3.停用浮動

刪除套用於清單項目的所有浮動屬性,確保它們顯示內聯區塊:

ul li {
    float: none;
    display: inline-block;
}

4.調整字體大小

最後一步,將字體大小調整為所需的外觀。

範例

考慮以下程式碼:

#info {
    ...
}

#info ul {
    padding: 0;
    list-style-type: none;
}

#info ul li {
    float: none;
    display: inline-block;
    line-height: 1em;
}

這種技術組合應該可以消除無序列表中換行的縮進,確保外觀乾淨、專業。

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3