Bagaimana untuk menukar jenis elemen lain ke dalam elemen sebaris dalam css-Soal Jawab bahagian hadapan-php.cn

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

青灯夜游

Lepaskan： 2022-09-01 18:16:35

asal

1512 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!