Bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS?

WBOY

Lepaskan： 2023-09-19 16:45:04

ke hadapan

1396 orang telah melayarinya

如何使用 CSS 使 div 元素内联显示？

CSS bermaksud Cascading Style Sheet, yang menentukan penampilan elemen HTML dalam pelbagai media, termasuk cetakan, paparan dan format cetak dan digital lain. Anda boleh menyimpan banyak kerja dengan CSS. Ia boleh menguruskan reka bentuk berbilang halaman web secara serentak.

Dalam artikel ini, kita akan melihat bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS, untuk ini kita perlu mengetahui beberapa sifat CSS yang digunakan untuk membuat elemen div kelihatan sebaris -

Paparan - Atribut paparan menentukan jenis kotak pemaparan elemen (tingkah laku paparan). Di sini kita akan menggunakan paparan: flex dan paparan: sifat blok sebaris.
Float - Menggunakan atribut apungan, anda boleh memberitahu elemen terapung ke kiri, terapung ke kanan, atau tidak terapung langsung. Di sini kita akan menggunakan harta float left untuk memaparkan div terapung ke kiri.
sebaris tidak bermula pada baris baharu dan hanya mengambil lebar yang diperlukan. Anda tidak boleh menetapkan lebar dan tinggi.

.inline-element {
   display: inline;
   width: 1000px;
   height: 1000px;
}

Salin selepas log masuk

Berikut ialah beberapa elemen dengan atribut sebaris lalai -

Span
satu
img

Formatkan tag yang pada asasnya adalah sebaris -

Mereka
kuat
saya
kecil

Sebaris-blok Format elemen sebaris yang tidak bermula pada baris baharu. Walau bagaimanapun, anda boleh menetapkan nilai lebar dan ketinggian.

.inline-block-element {
   display: inline-block;
   width: 1000px;
   height: 1000px;
}

Salin selepas log masuk

sekat elemen bermula pada baris baharu dan gunakan semua lebar yang tersedia. Anda boleh menetapkan nilai untuk lebar dan tinggi.

Berikut ialah beberapa elemen dengan atribut blok lalai -

div
h1
p
li
Bahagian

Untuk menjadikan komponen div paparan sebaris, kami mula-mula akan membina beberapa kod HTML asas dan menggunakan pelbagai gaya CSS.

Contoh

Dalam contoh ini, semua elemen div mempunyai set div induknya dengan tetapan paparan: flex dan flex-direction: row. Terima kasih kepada atribut flex-direction: row, semua komponen yang terkandung dalam div induk akan muncul dalam satu baris.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .main {
         display: flex;
         flex-direction: row;
         font-size: 30px;
         color: red;
         border: 4px double red;
         padding: 5px;
         width: 400px;
      }
      .main div {
         border: 2px solid greenyellow;
         margin: 10px 20px;
         width: 100px;
      }
   </style>
</head>
<body>
   <div class="main">
      <div>Hello, World!</div>
      <div>Hello, World!</div>
      <div>Hello, World!</div>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh ini, kita perlu menambah paparan: atribut sekatan sebaris kepada semua div yang perlu dipaparkan sebaris. Jika atribut display:inlineblock digunakan, semua komponen div akan diletakkan bersebelahan.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div {
         display: inline-block;
         color: red;
         border: 2px solid greenyellow;
         margin: 10px 20px;
         width: 120px;
         font-size: 40px;
      }
   </style>
</head>
<body>
   <div>Hello, World!</div>
   <div>Hello, World!</div>
   <div>Hello, World!</div>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh ini, untuk memaparkan semua elemen div sebaris, kami akan memberi mereka apungan: atribut kiri. Selain itu, pengguna boleh menggunakan pilihan CSS apungan: kanan untuk memaparkan semua komponen div dalam susunan terbalik bermula dari kanan.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div {
         float: left;
         color: red;
         border: 2px solid greenyellow;
         margin: 10px 20px;
         width: 120px;
         font-size: 40px;
      }
   </style>
</head>
<body>
   <div>Hello, World!</div>
   <div>Hello, World!</div>
   <div>Hello, World!</div>
</body>
</html>

Salin selepas log masuk

Contoh

Kaedah ini menggunakan elemen span dan bukannya elemen div. Jika pengguna hanya perlu menulis teks dalam teg div, teg span boleh digunakan kerana semua elemen span dipaparkan sebaris secara lalai.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      span {
         color: green;
         border: 2px solid red;
         margin: 10px 20px;
         width: 100px;
         font-size: 30px;
      }
   </style>
</head>
<body>
   <span>Hello World!</span>
   <span>Hello World!</span>
   <span>Hello World!</span>
</body>
</html>

Salin selepas log masuk

Perbezaan utama dengan paparan: sebaris ialah anda boleh menggunakan paparan: blok sebaris untuk menetapkan lebar dan ketinggian sesuatu elemen.

Juga mengekalkan paparan: blok sebaris, mengekalkan jidar/lapik atas dan bawah, tetapi tidak dalam paparan: sebaris. Perbezaan utama dengan paparan: blok ialah paparan: inlineblock tidak menambah baris baharu selepas elemen, jadi satu elemen boleh terletak di sebelah elemen lain.

Coretan kod berikut menunjukkan gelagat paparan yang berbeza: sebaris, paparan: sekatan sebaris dan paparan: sekatan.

span.a {
   display: inline; /* the default for span */
   width: 100px;
   height: 100px;
   padding: 5px;
   border: 1px solid blue;
   background-color: yellow;
}
span.b {
   display: inline-block;
   width: 100px;
   height: 100px;
   padding: 5px;
   border: 1px solid blue;
   background-color: yellow;
}
span.c {
   display: block;
   width: 100px;
   height: 100px;
   padding: 5px;
   border: 1px solid blue;
   background-color: yellow;
}

Salin selepas log masuk

Blok sebaris untuk membuat pautan navigasi

Penggunaan paparan biasa: Blok sebaris digunakan untuk memaparkan item senarai secara mendatar dan bukannya menegak. Contoh berikut mencipta pautan navigasi mendatar.

.nav {
   background-color: yellow;
   list-style-type: none;
   text-align: center;
   padding: 0;
   margin: 0;
}
.nav li {
   display: inline-block;
   font-size: 20px;
   padding: 20px;
}

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!