Wenn wir die Breite und Höhe eines Elements in CSS festlegen, erscheint das Element oft größer als seine tatsächliche Größe. Dies liegt daran, dass der Breite und Höhe des Elements standardmäßig Abstand und Rahmen hinzugefügt werden, bevor das Element angezeigt wird.
Zu den Größenänderungseigenschaften der Box gehören die Abstände und Ränder des eigentlichen Elements. Breite und Höhe, damit das Element nicht größer aussieht, als es tatsächlich ist. Das Format, das dieses Attribut verwendet, ist „box-sizing: box-border“
Sie können versuchen, den folgenden Code auszuführen, um Text auszurichten und Felder mit der gleichen Breite auszuwählen -
<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>Das obige ist der detaillierte Inhalt vonRichten Sie Text und Auswahlfeld mithilfe von HTML und CSS auf die gleiche Breite aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
