Rumah >hujung hadapan web >html tutorial >Jajarkan teks dan kotak pilih pada lebar yang sama menggunakan HTML dan CSS
Jajarkan teks dan kotak pilih pada lebar yang sama menggunakan HTML dan CSS
- WBOYke hadapan
- 2023-09-04 22:37:05943semak imbas
Apabila kita menetapkan lebar dan tinggi elemen dalam CSS, elemen itu selalunya akan kelihatan lebih besar daripada saiz sebenar. Ini kerana secara lalai, padding dan sempadan ditambahkan pada lebar dan ketinggian elemen sebelum elemen dipaparkan.
Sifat mengubah saiz kotak termasuk pelapik dan sempadan elemen sebenar. Lebar dan tinggi supaya elemen tidak kelihatan lebih besar daripada saiz sebenar. Format menggunakan atribut ini ialah "box-sizing: box-border"
Contoh
Anda boleh cuba menjalankan kod berikut untuk menjajarkan teks dan memilih kotak yang sama lebar -
<html>
<head>
<style>
input, select {
width: 250px;
border: 2px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<input type = "text" value = "Name of Candidate"><br>
<select>
<option>Select Choice</option>
<option>Student</option>
<option>Teachers</option>
<option>Head</option>
</select>
</body>
</html>Atas ialah kandungan terperinci Jajarkan teks dan kotak pilih pada lebar yang sama menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!