Bagaimana untuk Menginden Teks Balut dengan Betul dalam Senarai Berbulet?

Cara Mengesot Baris Kedua Item Senarai Berbulet Berbalut

Apabila bekerja dengan senarai bertitik tumpu mata, kadangkala item senarai boleh menjadi begitu panjang bahawa ia membungkus ke baris seterusnya. Secara lalai, bahagian yang dibalut akan sejajar dengan permulaan baris, mewujudkan penampilan yang tidak kemas. Untuk menangani perkara ini, kami mahu bahagian yang dibalut sebaris dengan baris pertama item peluru.

Dalam soalan ini, pengguna menghadapi isu yang sama. Kod semasa mereka, yang disediakan dalam bahagian "Kandungan Masalah", tidak mencapai lekukan yang diingini. Penyelesaian yang dicadangkan adalah untuk memecahkan item peluru kepada dua div berasingan: satu untuk peluru dan satu untuk teks. Div ini kemudiannya dibalut dalam div bekas.

Berikut ialah coretan kod yang dipertingkat menggunakan pendekatan yang dicadangkan:

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>

Dalam kod yang dikemas kini ini, warna merah segi empat sama yang mewakili peluru diletakkan secara mutlak dan dijajarkan secara menegak dengan baris pertama teks. Teks panjang kemudian mengalir secara semula jadi, menjajarkan dengan tepi kiri div bekas. Pendekatan ini berjaya mencapai lekukan yang diingini untuk bahagian yang dibalut item peluru.

Atas ialah kandungan terperinci Bagaimana untuk Menginden Teks Balut dengan Betul dalam Senarai Berbulet?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!