div css tidak membungkus

Apabila membangunkan halaman web, kami sering menghadapi situasi di mana berbilang elemen perlu dipaparkan pada baris yang sama Namun, disebabkan kandungan yang berlebihan atau had saiz tetingkap penyemak imbas, teks akan secara automatik membalut dan menjejaskan reka letak halaman. Pada ketika ini, kita perlu menggunakan gaya CSS untuk mengawal elemen supaya tidak membalut. Dua kaedah tanpa pemisah baris diperkenalkan di bawah.

1. Tetapkan atribut ruang putih

white-space untuk mengawal pemprosesan ruang putih di dalam elemen, yang mengandungi berbilang nilai:

• normal: Nilai lalai, gabungkan aksara ruang putih berturut-turut dan layan baris baharu sebagai ruang.
• nowrap: Pemisahan baris tidak dibenarkan dan aksara ruang putih digabungkan.
• pre: Mengekalkan aksara ruang putih berturut-turut, tetapi tidak membenarkan pemisah baris.
• pre-wrap: Mengekalkan aksara ruang putih berterusan dan membenarkan pemisah baris.
• pre-line: Gabungkan aksara ruang putih berturut-turut, membenarkan pemisah baris.

Kita boleh menggunakan atribut white-space: nowrap untuk melarang pembalut garisan automatik bagi elemen untuk mencapai kesan tiada pembalut garis. Sebagai contoh, kod berikut menetapkan tiga elemen rentang pada baris yang sama tanpa pembalut.

<div>
  <span>第一个元素</span>
  <span>第二个元素</span>
  <span>第三个元素</span>
</div>

div {
  white-space: nowrap;
}

Pada ketika ini, tidak kira berapa banyak kandungan teks di dalam elemen, semuanya akan dipaparkan pada baris yang sama.

2. Gunakan atribut apungan

Cara lain untuk memaparkan elemen pada baris yang sama ialah menggunakan atribut float. Sifat ini mengapungkan elemen ke kiri atau kanan elemen induknya, menyebabkan kedudukan elemen berubah. Kita boleh menetapkan semua elemen untuk diletakkan pada baris yang sama untuk terapung, dengan itu mencapai kesannya berada pada baris yang sama. Sebagai contoh, kod di bawah menetapkan dua elemen div untuk terapung supaya ia berada pada baris yang sama dan tidak membalut.

<div class="container">
  <div class="item">第一个元素</div>
  <div class="item">第二个元素</div>
</div>

.container {
  overflow: hidden; /*清除浮动*/
}
.item {
  float: left; /*将元素浮动*/
}

Dalam kod di atas, kami menambahkan atribut overflow: hidden pada elemen induk Ini adalah untuk menyelesaikan kesan unsur terapung pada ketinggian unsur induk. Ketinggian elemen terapung tidak lagi menduduki ketinggian elemen induk Jika apungan tidak dibersihkan, ia boleh menyebabkan elemen bertindih atau ketinggian elemen induk yang salah. Oleh itu, kami biasanya menambah atribut ini pada terapung kosong.

Selain itu, kelemahan menggunakan terapung ialah anda perlu mempertimbangkan untuk mengosongkan terapung, jika tidak, ia mungkin menjejaskan susun atur elemen seterusnya. Untuk mengelakkan masalah ini, kita harus sentiasa ingat untuk menambah gaya terapung jelas kepada unsur terapung.

Ringkasnya, sama ada anda menggunakan atribut white-space atau atribut float, anda boleh mencapai kesan memaparkan elemen dalam baris yang sama, tetapi kaedah pelaksanaannya berbeza. Dalam pembangunan khusus, kaedah yang berbeza boleh dipilih mengikut situasi sebenar. Walau bagaimanapun, tidak kira kaedah yang digunakan, integriti susun atur halaman perlu dipertimbangkan sepenuhnya untuk mengelakkan masalah yang tidak dapat diramalkan.

Atas ialah kandungan terperinci div css tidak membungkus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!