Comment faire en sorte qu'un champ `` remplisse l'espace disponible en utilisant \'width: auto\' en CSS ?

Largeur : auto pour Fields

Les débutants en CSS rencontrent souvent de la confusion lors de l'application de la propriété "width:auto" pour afficher: bloquer des éléments comme champs, car il peut ne pas se comporter comme prévu.

Définition de la largeur automatique :

La spécification CSS reste ambiguë quant à la définition précise de "width:auto", laissant de la place pour confusion. Cependant, en général, cela signifie que la largeur de l'élément s'ajustera automatiquement pour s'adapter à son contenu.

Atteindre le comportement attendu pour Champs :

Pour effectuer une saisie remplissez l'espace disponible comme les autres éléments de niveau bloc, les étapes suivantes peuvent être suivies :

1. Remplacer la taille par défaut :

L'attribut de taille par défaut pour les champs génèrent sa largeur. Pour remplacer cela, "width:100%" peut être appliqué. Ceci définit la largeur pour qu'elle couvre tout l'espace disponible de l'élément parent.

2. Supprimez les problèmes de bordure spécifiques au navigateur :

Malheureusement, les navigateurs gèrent les bordures légèrement différemment, ce qui entraîne des incohérences. Pour résoudre ce problème, des CSS supplémentaires peuvent être utilisées :

• Appliquez des marges négatives pour contrecarrer la gestion des bordures spécifiques au navigateur.
• Utilisez des bordures incrustées pour éviter davantage les incohérences.

Exemple de code :

Le code suivant montre comment remplir l'espace disponible avec un tout en surmontant les problèmes de bordure spécifiques au navigateur :

<div style="padding:30px;width:200px;background:red">
  <form action="" method="post" style="width:200px;background:blue;padding:3px">
    <input size="" style="width:100%;margin:-3px;border:2px inset #eee" />
    <br /><br />
    <input size="" style="width:100%" />
  </form>
</div>

Il convient de noter que ce code peut ne pas être parfait dans tous les navigateurs. Cependant, il fournit une approximation étroite du comportement souhaité et résout les incohérences potentielles entre navigateurs.

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!