Bonjour,
Un label, un input[ text] et un input[ submit] se promenaient bras de dessus bras dessous en sifflant et en chantonnant des hymnes à la liberté, marchant à travers champs pendant plusieurs jours. Leurs chants finirent malheureusement par attirer l'attention d'un paysan qui avait l'oreille fine, et qui pour les punir d'avoir traversé ses récoltes les captura et les enferma dans une boîte minuscule dans sa grange.
input[ text], le chef de la bande, avait toujours besoin de beaucoup de place, il essaya d'abord de pousser les bords de la boite pour l'agrandir, mais elle ne bougea pas. Puis il s'étira alors de tout son long, bousculant ces deux copains qui se retrouvèrent à devoir lui monter dessus et se cognèrent la tête contre le haut de la boîte.
Ils se concertèrent alors pour trouver le meilleur positionnement pour chacun d'eux, en restant tout de même sur la même ligne, sachant que label et input[ submit] ont juste besoin de quelques pixels pour leur texte, et que input[ text] doit s'étirer le plus possible.
Tout trois avaient lu les bonnes pratiques du positionnement en société, et ils savaient qu'il ne fallait pas utiliser de chiffre magique pour régler le problème, mais ils ne trouvaient pas de solution pour autant.
Je voudrais sur une même ligne les 3 compères, avec le input[ text] au milieu qui doit prendre toute la place disponible. Une solution ?
http://jsfiddle.net/RdXQC/
Merci !
Modifié par okio (16 Jul 2013 - 16:18)
Un label, un input[ text] et un input[ submit] se promenaient bras de dessus bras dessous en sifflant et en chantonnant des hymnes à la liberté, marchant à travers champs pendant plusieurs jours. Leurs chants finirent malheureusement par attirer l'attention d'un paysan qui avait l'oreille fine, et qui pour les punir d'avoir traversé ses récoltes les captura et les enferma dans une boîte minuscule dans sa grange.
input[ text], le chef de la bande, avait toujours besoin de beaucoup de place, il essaya d'abord de pousser les bords de la boite pour l'agrandir, mais elle ne bougea pas. Puis il s'étira alors de tout son long, bousculant ces deux copains qui se retrouvèrent à devoir lui monter dessus et se cognèrent la tête contre le haut de la boîte.
Ils se concertèrent alors pour trouver le meilleur positionnement pour chacun d'eux, en restant tout de même sur la même ligne, sachant que label et input[ submit] ont juste besoin de quelques pixels pour leur texte, et que input[ text] doit s'étirer le plus possible.
Tout trois avaient lu les bonnes pratiques du positionnement en société, et ils savaient qu'il ne fallait pas utiliser de chiffre magique pour régler le problème, mais ils ne trouvaient pas de solution pour autant.
<div class="header">
<form>
<label>Label</label>
<input type="text" />
<input type="submit" value="ok" />
</form>
</div>.header {
width: 100%;
}
form {
width: 50%;
background-color: lightgray;
display: table;
}
input[type=text], input[type=submit], label {
display: table-cell;
}
input[type=text] {
/* Fait passer le bouton ok à la ligne oO */
/* width: 100%; */
}Je voudrais sur une même ligne les 3 compères, avec le input[ text] au milieu qui doit prendre toute la place disponible. Une solution ?
http://jsfiddle.net/RdXQC/
Merci !
Modifié par okio (16 Jul 2013 - 16:18)
