Bagaimana untuk Melaksanakan Lebar Tetap untuk Span dalam Senarai Tidak Tertib Merentasi Pelayar?

Melaksanakan Lebar Tetap dalam Span Dalam Senarai Tidak Tertib

Dalam bidang reka bentuk web, mencapai lebar tetap untuk rentang dalam satu senarai tidak tersusun boleh menjadi satu cabaran. Pertimbangkan coretan HTML di bawah:

<code class="html"><ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul></code>

Hasil yang diingini ialah memastikan teks mengikut setiap rentang dibaris secara menegak, seperti:

<code class="text">The lazy dog.
AND The lazy cat.
OR  The active goldfish.</code>

Untuk mencapai ini, pendekatan biasa ialah untuk menggunakan CSS berikut:

<code class="css">span {
  display: inline-block;
  width: 50px;
}</code>

Penyelesaian ini, walau bagaimanapun, menghadapi had dalam pelayar tertentu, iaitu Firefox 2 dan lebih awal. Pelayar ini tidak mengenali nilai blok sebaris. Pilihan alternatif untuk penyemak imbas ini ialah menggunakan -moz-inline-box. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa ini bukan setara tepat bagi blok sebaris dan mungkin menunjukkan gelagat berbeza dalam senario tertentu.

Untuk memastikan konsistensi merentas semua penyemak imbas, tweak CSS tambahan mungkin diperlukan. Satu penyelesaian sedemikian ialah:

<code class="css">@-moz-document url-prefix() {
  span {
    -moz-inline-box: true;
    width: 50px;
  }
}</code>

Dengan menggunakan pendekatan ini, lebar tetap yang diingini boleh dicapai dalam penyemak imbas yang tidak menyokong sekatan sebaris secara asli. Adalah penting untuk ambil perhatian bahawa menambah padding pada teks atau mengubah suai struktur teg tidak dibenarkan dalam senario ini.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Lebar Tetap untuk Span dalam Senarai Tidak Tertib Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!