Largeur 100% et éléments de forme + remplissage?

Que dois-je faire pour éviter que les éléments suivants ne s'étirent à plus de 100%? Il s'étire évidemment à 100% puis ajoute sur le rembourrage ... Merci!Largeur 100% et éléments de forme + remplissage?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css" media="screen"> 
     #box { 
      width: 100%; 
      padding: 20px; 
      border: 1px solid #000; 
     } 
     #box input { 
      width: 100%; 
      padding: 5px; 
     } 
    </style> 
</head> 
<body> 
    <div id="box"> 
     <form> 
      <input type="text" value="" /> 
     </form> 
    </div> 
</body> 
</html>

Source

2010-07-08 mike

Votre width:100% sur le div est tout à fait inutile. Les Div sont des éléments de niveau bloc qui s'étendent automatiquement à 100% de leur conteneur. Supprimez le width:100% de votre déclaration div et le remplissage sera contenu dans le conteneur parent, pas de défilement ou de largeur étendue. NE PAS utiliser une marge négative, c'est juste ajouter un hack pour réaliser quelque chose de simple.

Vous pouvez utiliser cette règle en général: Vous n'avez presque jamais à mettre width:100% sur un div (je ne peux pas penser à la tête pourquoi vous le feriez sauf si elle était affichée en ligne ou quelque chose), comme mentionné ci-dessus, éléments de niveau bloc étendent toujours à 100% de leur contenant

edit: qui était stupide de suggérer la mise en largeur 100% sur une div affichées en ligne que vous ne pouvez pas définir les dimensions sur un élément en ligne

Source

2010-07-08 19:11:30 brad

Créer une nouvelle règle form et déplacer la déclaration padding: 20px; à elle.

#box { 
    width: 100%; 
    border: 1px solid #000; 
} 

form { 
    padding: 20px; 
}

Source

2010-07-08 19:06:10 melhosseiny

Largeur 100% et éléments de forme + remplissage?

Répondre

Questions connexes