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

Rumah

hujung hadapan web

tutorial css

Bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 19, 2023 pm 04:45 PM

如何使用 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;
}

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;
}

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>

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>

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>

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>

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;
}

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;
}

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!

Kenyataan

Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Bagaimana kami menandakan font Google dan mencipta goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts adalah projek sampingan yang ditandatangani oleh isteri pemaju dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah menandakan Google

Artikel Web Dev yang tidak berkesudahanApr 12, 2025 am 11:44 AM

Pavithra Kodmad meminta orang ramai untuk membuat cadangan mengenai apa yang mereka fikir adalah beberapa artikel yang paling abadi mengenai pembangunan web yang telah mengubahnya

Perjanjian dengan elemen seksyenApr 12, 2025 am 11:39 AM

Dua artikel diterbitkan pada hari yang sama:

Amalkan pertanyaan GraphQL dengan keadaan API JavaScriptApr 12, 2025 am 11:33 AM

Belajar bagaimana untuk membina API GraphQL boleh menjadi agak mencabar. Tetapi anda boleh belajar cara menggunakan API GraphQL dalam 10 minit! Dan ia berlaku saya ' ve mendapat yang sempurna

CMSS peringkat komponenApr 12, 2025 am 11:09 AM

Apabila komponen tinggal di persekitaran di mana pertanyaan data memisahkannya tinggal berdekatan, terdapat garis langsung yang cukup antara komponen visual dan

Tetapkan jenis pada bulatan ... dengan laluan mengimbangiApr 12, 2025 am 11:00 AM

Di sini ' s beberapa CSS Trickery dari Yuanchuan. Terdapat CSS Property Offset-Path. Suatu ketika dahulu, ia dipanggil gerakan-jalan dan kemudian ia dinamakan semula. I