Input qui prend toute la largeur disponible

Bonjour,

je voudrais arriver à quelque chose de similaire pour un formulaire, sans définir de largeur ni pour les labels ni pour les input :

http://tof.canardpc.com/view/ec5e7fee-ecf3-48ac-b81f-5286c14c121c.jpg

Je vois pas bien comment faire, sachant que chaque label a une taille différente et que chaque input en conséquence a aussi une taille différente et doit prendre toute la place qui reste.

<form>
<ul>
	<li>
		<label for="prenom">Prénom<span class="obligatoire">*</span> :</label>
		<input type="text" value="" id="prenom" name="prenom">
	</li>
	<li>
		<label for="email">Email<span class="obligatoire">*</span> :</label>
		<input type="text" value="" id="email" name="email">
	</li>
	<li>
		<label for="tel">Téléphone :</label>
		<input type="text" value="" id="tel" name="tel">
	</li>
</ul>
</form>

form ul {
	list-style: none;
}
form label {
	display: inline-block;
}
form input[type=text], form input[type=password], form textarea {
	display: inline-block;
}

En laissant ainsi sans largeur, logiquement ça ne fonctionne pas, les inputs ont une taille définie par le navigateur, et si j'en définie une manuellement forcément ça ne colle pas pour tous.

Une idée ?

Merci
Modifié par gmic72 (14 Mar 2012 - 18:25)

Bonsoir,

un width: 100% ?

Apoooo a écrit :
Bonsoir,

un width: 100% ?

Nope, avec ça le input prend toute la largeur du bloc parent, et vient se mettre sous le label.

Bon, j'ai essayé avec table-cell et ses amis, ça marche plutôt bien... sous IE8+, malheureusement sur Firefox et les autres le label prend plus de place que nécessaire :

IE :
http://tof.canardpc.com/view/2f5b2db6-3034-46a4-aa58-c251208d9128.jpg

FF et autres :
http://tof.canardpc.com/view/db2eb04e-5fae-49ac-81df-f4bac2730a8f.jpg

<form>
	<ul>
		<li>
			<div class="fake-table">
				<label for="nom">Nom<span class="obligatoire">*</span> :</label>
				<input type="text" name="nom" id="nom" value="" />
			</div>
		</li>
		<li>
			<div class="fake-table">
				<label for="prenom">Prénom<span class="obligatoire">*</span> :</label>
				<input type="text" name="prenom" id="prenom" value="" />
			</div>
		</li>
		<li>
			<div class="fake-table">
				<label for="email">Email<span class="obligatoire">*</span> :</label>
				<input type="text" name="email" id="email" value="" />
			</div>
		</li>
		<li>
			<div class="fake-table">
				<label for="tel">Téléphone :</label>
				<input type="text" name="tel" id="tel" value="" />
			</div>
		</li>
	</ul>
</form>

form ul {
	list-style: none;
}
form li {
	display: table;
	width: 100%;
	margin-bottom: 10px;
}
form .fake-table {
	display: table-row;
}
form label {
	display: table-cell;
	padding-right: 10px;
}
form input[type=text] {
	display: table-cell;
	width: 100%;
}

Est-ce qu'on peut corriger ce problème de largeur sur le label ?
Ou alors est-ce que vous avez d'autres idées que les table-cell ?

Merci

gmic72

a écrit :
Bonjour,

je voudrais arriver à quelque chose de similaire pour un formulaire, sans définir de largeur ni pour les labels ni pour les input :

Je ne vais pas essayer de résoudre ton problème mais t'orienter vers autre chose. Pourquoi essaies-tu d'arriver à cela. N'importe comment, ce n'est pas esthétique.

Le résultat serait beaucoup plus beau avec un alignement à droite des éléments contenant tes input et tes labels et des input de même largeur.
Modifié par thierry (16 Mar 2012 - 09:10)

thierry a écrit :
Je ne vais pas essayer de résoudre ton problème mais t'orienter vers autre chose. Pourquoi essaies-tu d'arriver à cela. N'importe comment, ce n'est pas esthétique.

Le résultat serait beaucoup plus beau avec un alignement à droite des éléments contenant tes input et tes labels et des input de même largeur.

Mon exemple n'est qu'une partie de plusieurs formulaires, dans lesquels les labels peuvent être très longs ou très courts, quand on voit le rendu final (enfin sur le papier...) dans ces conditions là ce n'est pas si inesthétique que ça.

Enfin c'est discutable, mais là n'est pas la question, disons que je m'impose un exercice de style