Maison > Article > interface Web > Alignez le texte et la zone de sélection sur la même largeur en utilisant HTML et CSS
Alignez le texte et la zone de sélection sur la même largeur en utilisant HTML et CSS
- WBOYavant
- 2023-09-04 22:37:05871parcourir
Lorsque nous définissons la largeur et la hauteur d'un élément en CSS, l'élément apparaîtra souvent plus grand que sa taille réelle. En effet, par défaut, le remplissage et les bordures sont ajoutés à la largeur et à la hauteur de l'élément avant que l'élément ne soit affiché.
Les propriétés de redimensionnement de la boîte incluent le remplissage et les bordures de l'élément réel. Largeur et hauteur pour que l'élément ne paraisse pas plus grand qu'il ne l'est réellement. Le format utilisant cet attribut est "box-sizing: box-border"
Exemple
Vous pouvez essayer d'exécuter le code suivant pour aligner le texte et sélectionner des cases de même largeur -
<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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!