Bagaimana untuk Mengelakkan Item Senarai Bullet yang Dibalut daripada Inden?

Lekukan Item Senarai Bullet Berbalut

Apabila item senarai panjang dibalut ke baris baharu, adalah perkara biasa untuk bahagian yang dibalut kelihatan inden di bawah simbol peluru. Walau bagaimanapun, dalam senario tertentu, teks yang dibalut mungkin diingini sebaris menegak dengan baris pertama.

Untuk mencapai ini, pertimbangkan untuk menggunakan struktur bekas dua peringkat. Balut simbol peluru dalam bekasnya sendiri dan letakkannya di sebelah bekas untuk teks item senarai. Dengan meletakkan bekas ini dalam bekas induk, anda boleh mengawal kedudukan dan penjajaran elemen.

.container-div {
    padding-left: 20px;
}

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

.row2 {
    overflow: hidden;
    max-width: 500px;
}

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

Dengan pendekatan ini, teks yang dibalut akan muncul di sebelah kiri, sejajar dengan baris pertama , manakala simbol peluru kekal pada kedudukan asalnya. Teknik ini memberikan kawalan yang tepat ke atas lekukan dan susun atur senarai peluru anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Item Senarai Bullet yang Dibalut daripada Inden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!