Bagaimanakah Saya Boleh Mencapai Pemisah Baris Berinden dengan Betul dalam Senarai Berbulet?

Mencapai Pemisah Baris Inden dalam Senarai Berbulet

Apabila berurusan dengan item senarai bertitik tumpu panjang yang membalut ke baris baharu, adalah wajar untuk kesinambungan untuk menjajarkan secara mendatar dengan baris pertama. Secara lalai, teks yang dibalut muncul di bawah titik, mewujudkan penampilan tidak sejajar.

Untuk menyelesaikan isu ini, kami boleh menggunakan pendekatan menggunakan div tambahan.

Penyelesaian

1. Balut Peluru dalam a Div:
   Sisipkan peluru dalam
   elemen, menyediakan kedudukan mutlak dan melaraskan jidarnya agar sepadan dengan penampilan peluru.
2. Balut Kedua-dua Div dalam Div Bekas:
   Buat bekas
   untuk menahan kedua-dua titik dan teks item senarai

   elemen. Gunakan penggayaan yang diperlukan untuk mengawal pelapik dan limpahan.
3. Sejajarkan Teks Item Senarai:
   Dalam bekas, pastikan teks
   mempunyai padding yang sesuai untuk menjajarkannya secara mendatar dengan peluru.

Contoh Kod

.row2 {
    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>

Dengan mengikuti pendekatan ini, garisan yang dibalut dalam senarai bertitik tumpu akan inden di sebelah kanan peluru, menjajarkan dengan baris pertama dan meningkatkan kebolehbacaan dan estetika anda senarai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Pemisah Baris Berinden dengan Betul dalam Senarai Berbulet?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!