Comment puis-je obtenir qu'un élément `` remplisse l'espace disponible avec `width: auto` ?

Que signifie width: auto pour Éléments ?

Malgré sa compréhension commune en tant que directive visant à remplir l'espace disponible pour les éléments de bloc, width: auto se comporte différemment pour field.

Définition de width: auto

La spécification CSS ne définit pas explicitement le comportement spécifique de width: auto pour éléments. Cependant, cela signifie généralement que le navigateur doit calculer la largeur en fonction des propriétés intrinsèques d'un élément.

Atteindre le comportement souhaité pour les champs de saisie

Pour obtenir le comportement attendu en matière de remplissage espace disponible pour champs :

• Essayer la largeur : 100 % : Ceci définit la largeur de l'espace restant dans le conteneur, similaire au comportement d'autres éléments au niveau du bloc.

Si la largeur : 100 % échoue :

Cela peut être dû à l'attribut de taille par défaut, qui définit la taille de la zone de saisie. Pour remplacer cela, supprimez l'attribut size ou définissez-le sur une chaîne vide (par exemple, size="").

Exemple avec width : 100 % :

<code class="html"><form style="width: 200px; background: khaki">
  <input style="width: 100%" />
</form></code>

Solution partielle avec marges et bordures :

Pour une solution plus précise, ajoutez des marges négatives et des bordures incrustées au champ de saisie, comme indiqué dans ce code :

<code class="html"><div style="padding: 30px; width: 200px; background: red">
  <form style="width: 200px; background: blue; padding: 3px">
    <input style="width: 100%; margin: -3px; border: 2px inset #eee" />
  </form>
</div></code>

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!