Salut,
Le sujet a été fermé mais comme j'ai un peu bossé autant que ce ne soit pas pour rien
Il y a effectivement un petit souci pour qu'un input prenne toute la largeur de son parent de type block car il faut lui imposer un width:100%;
C'est une curiosité car en général donner le comportement display:block à une balise inline suffit pour qu'elle prenne toute la largeur du parent.
C'est à noter car ça ne facilite pas la tache.
Néanmoins si le parent n'a pas de largeur déterminée par un width il ne peut pas y avoir de problème et ceci
ne peut que fonctionner sans problème.
Le problème n'apparaitra donc que si on veut mettre par exemple une bordure à l'input lui même.
Dans ce cas il n'y a pas je le crains de solution directement en css et il faut intervenir dans le html en doublant le conteneur block de l'input. Soit :
Le sujet a été fermé mais comme j'ai un peu bossé autant que ce ne soit pas pour rien
Il y a effectivement un petit souci pour qu'un input prenne toute la largeur de son parent de type block car il faut lui imposer un width:100%;
C'est une curiosité car en général donner le comportement display:block à une balise inline suffit pour qu'elle prenne toute la largeur du parent.
C'est à noter car ça ne facilite pas la tache.
Néanmoins si le parent n'a pas de largeur déterminée par un width il ne peut pas y avoir de problème et ceci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="padding:10px 50px; border:20px solid green; margin:20px;">
<input type="text" style="width:100%;">
</div>
</body>
</html>
ne peut que fonctionner sans problème.
Le problème n'apparaitra donc que si on veut mettre par exemple une bordure à l'input lui même.
Dans ce cas il n'y a pas je le crains de solution directement en css et il faut intervenir dans le html en doublant le conteneur block de l'input. Soit :
<body>
<div style="padding:10px 50px; border:20px solid green; margin:20px;">
<div style="border:10px solid yellow">
<input type="text" style="width:100%; border:0;">
</div>
</div>
</body>