Bagaimana untuk menghalang div daripada membungkus dalam css

Dalam pembangunan web, CSS ialah salah satu teknologi utama. Di sini, kita akan belajar cara menggunakan elemen div dalam CSS untuk mencapai paparan tanpa membalut. Dengan tutorial ini, anda akan belajar cara menggunakan CSS untuk menetapkan lebar, ketinggian, penjajaran mendatar dan menegak bagi elemen div dan cara untuk mengelakkannya daripada membalut. Elemen

div ialah salah satu elemen bekas yang paling biasa digunakan dalam HTML5. Ia sering digunakan untuk menggabungkan kandungan pada halaman web. Kelebihan terbesar menggunakan elemen div ialah anda boleh meletakkan dan mengatur pelbagai elemen dengan mudah seperti teks, imej, jadual dan elemen HTML lain.

Berikut ialah cara untuk menetapkan lebar dan ketinggian elemen div menggunakan CSS:

div {
  width: 200px; /* 设置 div 元素的宽度为 200 像素 */
  height: 100px; /* 设置 div 元素的高度为 100 像素 */
}

Apabila elemen div mengandungi teks, ia akan membalut secara automatik jika teks melebihi lebar div unsur. Kita boleh menghalang teks daripada membungkus dengan menetapkan gaya CSS. Kod di bawah menunjukkan cara untuk menetapkan atribut ruang putih bagi elemen div untuk menghalang teks daripada dibalut.

div {
  white-space: nowrap; /* 设置 div 元素中的文本不换行 */
}

Kod di atas akan menjadikan keseluruhan kandungan teks muncul dalam satu baris.

Selain lebar, tinggi dan pembalut teks, kami juga boleh menetapkan penjajaran mendatar dan menegak menggunakan CSS. Kod di bawah menunjukkan cara memusatkan teks elemen div secara menegak dan mendatar menggunakan CSS.

div {
  width: 200px;
  height: 100px;
  text-align: center; /* 设置 div 元素中的文本水平居中 */
  line-height: 100px; /* 设置 div 元素中的文本垂直居中 */
}

Dalam kod di atas, lebar dan tinggi elemen div ialah 200 piksel dan 100 piksel masing-masing. Atribut text-align: center akan memusatkan teks secara mendatar, manakala atribut line-height: 100px akan memusatkan teks secara menegak.

Akhir sekali, kami akan menggunakan atribut display untuk menetapkan elemen div untuk dipaparkan pada baris yang sama tanpa membalut. Kod di bawah menunjukkan cara untuk mencapai ini menggunakan atribut display: inline-block.

div {
  display: inline-block; /* 设置 div 元素在同一行上不换行显示 */
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

Dalam kod di atas, atribut display: inline-block akan menyebabkan elemen div dipaparkan pada baris yang sama tanpa membalut.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan CSS untuk menetapkan lebar, ketinggian, pembalut teks, teks mendatar dan menegak memusatkan elemen div dan cara menggunakan display atribut untuk membuat elemen div Paparkan pada baris yang sama tanpa membalut. Teknologi ini penting untuk pembangun web kerana ia membantu kami mereka bentuk halaman web yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menghalang div daripada membungkus dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!