Bagaimana untuk mengelakkan pemisah baris apabila menggunakan tag?-html tutorial-php.cn

Bagaimana untuk mengelakkan pemisah baris apabila menggunakan tag?

WBOY

Lepaskan： 2023-09-02 22:05:06

ke hadapan

679 orang telah melayarinya

Bagaimana untuk mengelakkan pemisah baris apabila menggunakan tag?

Apabila menggunakan tag, pelayar biasanya meletakkan item dalam bekas pada baris seterusnya. Sebagai contoh, seorang pengaturcara perlu meletakkan tajuk dalam satu baris untuk mencipta komponen navigasi. Kita boleh menggunakan sifat sebaris, blok sebaris, kotak lentur, dsb. untuk mengelakkan baris baharu dalam label.

Artikel ini akan menerangkan cara mengelakkan pemisah baris dengan label melalui atribut sebaris, atribut kotak flex, dsb.

Gunakan atribut sebaris

Cara popular untuk mengelakkan pembalut label adalah dengan menggunakan atribut sebaris. Sifat ini memaksa baris baharu kekal sama seperti baris sebelumnya.

Contoh

<!DOCTYPE html>
<html lang="en">
<style>
   .first-container{
      display: inline;
      padding:2px;
      padding:10px;
      border: 2px solid orange;
   }
   .second-container{
      display: inline;
      padding: 10px;
      border: 2px solid purple;
   }
   body{
      padding:2vw;
   }
</style>
<body>
   <div class="first-container">
      This is the first paragraph.
   </div>
   <div class="second-container">
      This is the second paragraph.
   </div>
</body>
</html>

Salin selepas log masuk

Arahan

Kod HTML mencipta halaman web ringkas yang mengandungi dua bekas "bekas pertama" dan "bekas kedua". Pelapik elemen badan ialah 2% daripada lebar ruang pandang.
"Bekas pertama" mempunyai nilai paparan "sebaris" dengan jidar jingga dan pelapik 2 dan 10 piksel. Ia memaparkan teks "Ini adalah perenggan pertama". "Bekas kedua" mempunyai nilai paparan "sebaris", dengan jidar ungu dan 10 piksel pelapik. Ia memaparkan teks "Ini adalah perenggan kedua."

Gunakan atribut blok sebaris

Ini sama dengan kaedah sebelum ini, tetapi berbeza.

Perbezaan antara menggunakan inline dan inline block adalah seperti berikut -

Elemen "Sebaris" diletakkan sebaris dengan teks dan hanya mengambil lebar yang diperlukan. Mereka tidak mencipta konteks pemformatan blok baharu, dan juga tidak bermula pada baris baharu, jadi mereka tidak boleh menetapkan lebar, tinggi atau jidar. Contoh elemen sebaris termasuk teg "span" dan teg "a".
Elemen "sebaris-blok" adalah serupa dengan elemen "sebaris", tetapi ia boleh menetapkan lebar, tinggi dan jidar. Mereka juga mencipta konteks pemformatan blok baharu, yang bermaksud mereka boleh menetapkan padding, sempadan dan warna latar belakang. Walau bagaimanapun, ia masih akan diselaraskan dengan teks dan tidak akan bermula pada baris baharu. Contoh elemen blok sebaris termasuk imej dengan dimensi dan butang yang ditentukan.

Contoh

<!DOCTYPE html>
<html lang="en">
<style>
   .first-container{
      display: inline-block;
      padding:3px;
      padding:15px;
      border: 3px solid rgb(0, 47, 255);
   }
   .second-container{
      display: inline-block;
      padding: 15px;
      border: 3px solid rgb(92, 24, 42);
   }
   body{
      padding:2vw;
   }
</style>
<body>
   <div class="first-container">
      This is the first paragraph.
   </div>
   <div class="second-container">
      This is the second paragraph.
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan flexbox

Kaedah yang sangat popular ialah menggunakan Flexbox dan sifat berkaitan tagnya untuk mengelakkan pemutusan baris.

Contoh

<!DOCTYPE html>
<html lang="en">
<style>
   .first-container {
      padding: 3px;
      padding: 15px;
      border: 3px solid rgb(13, 108, 75);
   }
   .second-container {
      padding: 15px;
      border: 3px solid rgb(214, 59, 100);
   }
   .third-container {
      padding: 15px;
      border: 3px solid rgb(59, 59, 214);
   }
   body {
      padding: 2vw;
   }
   .container {
      display: flex;
      flex-direction: row;
   }
</style>
<body>
   <div class="container">
   <div class="first-container">This is the first element.</div>
   <div class="second-container">This is the second element.</div>
   <div class="third-container">This is the third element.</div>
   </div>
</body>
</html>

Salin selepas log masuk

Arahan

Kod HTML ini mencipta halaman web ringkas dengan tiga bekas, setiap satu dengan kelas yang berbeza. Pelapik elemen badan ditetapkan kepada 2% daripada lebar ruang pandang. Bekas pertama, bekas kedua dan elemen bekas ketiga mempunyai warna pelapik dan sempadan yang berbeza.
Bekas diletakkan di dalam bekas induk dengan kelas "bekas" yang mempunyai paparan: flex dan flex-direction: gaya baris. Ini menetapkan elemen bekas kepada bekas Flex dan memaparkan elemen kanak-kanak sebaris, dengan gaya dan pelapiknya sendiri.

Kesimpulan

Artikel ini mengajar kita cara menggunakan tag untuk mengelakkan garis putus. Kita boleh menggunakan atribut inline, inline block, flexbox, dsb. untuk mengelakkan pemisah baris. Pengaturcara menggunakan semua kaedah ini sama rata.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan pemisah baris apabila menggunakan tag?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!