Bagaimana untuk menghalang div blok sebaris daripada membungkus?-tutorial css-php.cn

Bagaimana untuk menghalang div blok sebaris daripada membungkus?

PHPz

Lepaskan： 2023-09-03 20:29:06

ke hadapan

999 orang telah melayarinya

如何防止inline-block div换行？

Dalam CSS, atribut 'paparan' digunakan untuk menetapkan paparan elemen kanak-kanak. Apabila kami menetapkan nilai "blok sebaris" untuk sifat paparan, ia memaparkan semua elemen kanak-kanak bersebelahan. Selain itu, ia secara automatik mencipta reka bentuk responsif, seolah-olah ia tidak menemui ruang yang mencukupi, ia secara automatik membalut elemen kanak-kanak.

Kadangkala, kita perlu berhenti membalut elemen kanak-kanak untuk mengurus ruang web. Dalam kes ini, kita boleh menguruskan sifat "ruang putih" CSS untuk mengelakkan membungkus elemen anak.

tatabahasa

Pengguna boleh mengikuti sintaks berikut dan menggunakan sifat CSS "ruang putih" untuk menghalang div blok sebaris daripada dibungkus.

CSS_selector {
   white-space: nowrap;
}

Salin selepas log masuk

Dalam sintaks di atas, CSS_selector ialah elemen induk bagi semua elemen anak yang kami tetapkan "blok sebaris" untuk dipaparkan.

Mari kita lihat contoh berikut untuk memahami cara menghalang elemen blok sebaris daripada dibalut.

Contoh 1

Dalam contoh di bawah, kami mencipta elemen div induk yang mengandungi nama kelas "bekas". Selepas itu, kami menambah tiga elemen anak dalam bekas induk, setiap satu mengandungi nama kelas "inline-block-div".

Dalam CSS, kami menggunakan sifat CSS "white-space: no-wrap" untuk bekas induk dan "display: inline-block" untuk semua elemen anak. Selain itu, kami menggunakan beberapa sifat CSS lain untuk menggayakan elemen div.

Dalam output, pengguna boleh cuba mengurangkan saiz tetingkap penyemak imbas dan perhatikan bahawa elemen div blok sebaris tidak membalut atau pergi ke baris seterusnya.

<html>
<head>
   <style>
      .container {
         white-space: nowrap;
      }
      .inline-block-div {
         display: inline-block;
         width: 200px;
         height: 100px;
         border: 1px solid black;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "container">
      <div class = "inline-block-div"> Div 1 </div>
      <div class = "inline-block-div"> Div 2 </div>
      <div class = "inline-block-div"> Div 3 </div>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami telah menambah berbilang jadual yang mengandungi data berbeza. Jadual pertama mengandungi data sekolah dan jadual kedua mengandungi data AC.

Kami menetapkan paparan kedua-dua jadual sama dengan blok sebaris untuk memaparkannya sebelah menyebelah pada halaman web. Selain itu, kami menggunakan atribut "ruang putih" dengan elemen div "bekas".

Dalam output, kita boleh memerhatikan dua jadual sebelah menyebelah, dan jika kita mengurangkan saiz tingkap, jadual tidak akan pergi ke baris seterusnya kerana kita menghalang kedua-dua elemen jadual daripada membungkus.

<html>
<head>
   <style>
      .container {white-space: nowrap;}
      .table {white-space: nowrap; display: inline-block; vertical-align: top; margin: 10px; border: 1px solid black;}
      th, td {padding: 10px 40px; border: 1px solid black;}
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "container">
      <table class = "container table">
         <tr><th> school Name </th> <th> Total Students </th> </tr>
         <tr><td> ABC School </td> <td> 100 </td></tr>
      </table>
      <table class = "container table">
         <tr><th> AC brand </th> <th> color </th><th> Price </th></tr>
         <tr><td> LG </td> <td> White </td> <td> 10000 </td> </tr>
      </table>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami menunjukkan cara untuk menghalang elemen div blok sebaris daripada membalut bersyarat. Jika kita perlu menghalang elemen div blok sebaris daripada dibalut di bawah sebarang keadaan tertentu, kita boleh menggunakan JavaScript.

Dalam JavaScript, kami mengakses semua elemen div dan mengulangi semua elemen div menggunakan kaedah forEach(). Kami menggunakan sifat "ruang putih" objek gaya untuk menghalang semua div blok sebaris daripada membungkus menggunakan JavaScript.

<html>
<head>
   <style>
      .child {width: 300px; background-color: blue; height: 200px; display: inline-block; margin: 10px; color: white; font-size: 30px;}
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "parent">
      <div class = "child"> First </div>
      <div class = "child"> Second </div>
      <div class = "child"> Third </div>
      <div class = "child"> Fourth </div>
   </div>
   <script>
      let divs = document.querySelectorAll('div');
      let divsArray = Array.from(divs);
      // add white-space: nowrap to all div
      divsArray.forEach(div => {
         div.style.whiteSpace = 'nowrap';
      });
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna mempelajari cara menghalang elemen div blok sebaris daripada dibalut. Kami menggunakan sifat CSS "ruang putih" untuk menghalang elemen div daripada dibalut. Walau bagaimanapun, menghalang elemen div blok sebaris daripada membalut bukanlah amalan yang baik kerana ia menghilangkan responsif halaman web, tetapi dalam beberapa kes tertentu, kita boleh menghalangnya jika kita tidak mahu elemen div berkembang secara menegak.

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