Bagaimana untuk Menjajarkan Item Senarai Bullet yang Dibalut dengan Baris Pertamanya?

Menjajarkan Baris Kedua Item Bullet dengan Baris Pertama

Apabila item senarai bertitik tumpu menjangkau berbilang baris, selalunya wajar untuk mempunyai baris berbalut sejajar dengan baris pertama, bukannya muncul di bawah bullet.

Penyelesaian:

Untuk mencapai penjajaran ini, bahagikan peluru ke dalam div yang berasingan dan balut kedua-dua peluru dan teks dalam div bekas:

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

Dalam contoh ini:

• Div kontena menyediakan padding tambahan untuk membuat margin untuk bullet.
• Bullet diposisikan secara mutlak dalam container-div menggunakan position: absolute.
• Teks diletakkan dalam row2 div dalam container-div.

Pendekatan ini memastikan bahawa baris yang dibalut item bertitik tumpu adalah sejajar dengan baris pertama, seperti dikehendaki.

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