hujung hadapan web
html tutorial
Bagaimana untuk mengelakkan pemisah baris apabila menggunakan tag?
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>
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>
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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
