Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

青灯夜游
青灯夜游asal
2022-09-01 18:16:351506semak imbas

Dalam CSS, anda boleh menggunakan atribut paparan untuk menukar jenis elemen dan menukar jenis elemen lain kepada elemen sebaris anda hanya perlu menetapkan gaya "display:inline" untuk elemen peringkat blok atau elemen blok sebaris Boleh. Atribut paparan digunakan untuk menentukan jenis kotak paparan yang dijana oleh elemen semasa membuat reka letak Apabila nilai atribut ini adalah "sebaris", elemen yang ditentukan akan dipaparkan sebagai jenis elemen sebaris.

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Elemen HTML dibahagikan kepada tiga jenis: elemen blok, elemen sebaris dan elemen blok sebaris.

Antaranya:

  • Elemen sebaris: bersebelahan dengan elemen sebaris lain tidak boleh ditetapkan, dan lebar lalai ialah lebar teks.

    elemen ialah: span i a b strong em sub sup u label br fon

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			span{
				width: 100px;/* 无效 */
				height: 100px;/* 无效 */
				background-color: plum;
			}
		</style>
	</head>

	<body>
		<span>元素1</span><span>元素1</span>
	</body>

</html>

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

  • Sekat -elemen tahap: menduduki satu baris dan tidak boleh disandingkan dengan mana-mana elemen lain boleh menerima lebar dan tinggi Jika lebar tidak ditetapkan, lebar akan lalai kepada 100% daripada induk.

    elemen ialah: div p h1-h6 hr ul ol li dl dd dt form

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 100px;
				height: 50px;
				background-color: plum;
				border: 1px solid red;
			}
			p{
				height: 50px;
				background-color: gray;
			}
		</style>
	</head>

	<body>
		<div>div元素1</div><div>div元素2</div>
		<p>p元素</p>
	</body>

</html>

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

  • Elemen blok sebaris: diletakkan bersebelahan dengan elemen sebaris yang lain, ketinggian, lebar, ketinggian garisan dan jidar atas dan bawah elemen semuanya boleh ditetapkan. Elemen

    ialah: input img textarea

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				width: 200px;/* 有效 */
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg" / alt="Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css" ><img  src="img/1.jpg" / alt="Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css" >
		<textarea></textarea>
		<textarea style="width: 200px;height: 100px;"></textarea>
	</body>

</html>

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

css menukar jenis elemen lain kepada Terpaut elemen

Dalam CSS, anda boleh menggunakan atribut paparan untuk menukar jenis elemen.

Atribut paparan digunakan untuk menentukan jenis kotak paparan yang dijana oleh elemen semasa membuat reka letak. Untuk jenis dokumen seperti HTML, menggunakan paparan secara sembarangan boleh berbahaya, kerana ia mungkin melanggar hierarki paparan yang telah ditakrifkan dalam HTML. Untuk XML, memandangkan XML tidak mempunyai hierarki jenis ini terbina dalam, semua paparan amat diperlukan.

  • blok: Elemen ini akan dipaparkan sebagai elemen peringkat blok, dengan pemisah baris sebelum dan selepas elemen ini.

  • sebaris: Lalai. Elemen ini akan dipaparkan sebagai elemen sebaris tanpa pemisah baris sebelum atau selepas elemen.

  • blok sebaris: Elemen blok sebaris. (Nilai baharu dalam CSS2.1)

Oleh itu, anda hanya perlu menetapkan gaya "display:inline" kepada elemen peringkat blok atau elemen blok sebaris untuk menukarnya kepada elemen sebaris. .

Contoh 1: Tukar elemen peringkat blok kepada elemen sebaris

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				background-color: pink;
			}
			.box{
				display: inline;	/* 块级元素转为内联元素 */
			}
		</style>
	</head>

	<body>
		<div>块级元素1</div>
		<div class="box">块级元素2</div>
		<div class="box">块级元素3</div>
	</body>

</html>

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

Contoh 2: Tukar elemen blok sebaris kepada elemen sebaris

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img,textarea{
				display:inline;	/* 内联块元素转为内联元素 */
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg" / alt="Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css" >
		<img  src="img/1.jpg" / alt="Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css" >
		<textarea></textarea>
		<textarea></textarea>
	</body>

</html>

Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css

(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn