Dl, dt et dd sur une ligne

Fruustyler -
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention - 16 avr. 2009 à 20:43

Bonjour,

Sur certains sites, ils arrivent à avoir de jolis formulaires grâce à une utilisation judicieuse des dl, dt et dd.
Seul problème, j'ai essayé de faire pareil et il m'est impossible de mettre les dt et dd sur une même ligne.

J'ai essayé avec des margin:0, des padding:0, des float:left; ou encore des display:inline, mais impossible. A chaque fois, la DL gardait son apparence d'origine, c'est à dire les dt à gauche, et les dd légèrement en-dessous, à droite.

Comment feriez-vous? Merci d'avance!

Configuration: Windows XP
Firefox 2.0.0.20

Afficher la suite

3 réponses

Réponse 1 / 3
Fruustyler

C'est si dur que ça?
0
Réponse 2 / 3
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923
salut,

et en gardant un formulaire basique ?
ce serait pas plus simple ?
```
<form>
	<p class="name">
		<label for="name">Nom</label>
		<input type="text" name="name" id="name"/>
	</p>
</form>
```
0
1. Fruustyler
  
  Oui, mais l'utilisation des dl permettrait d'organiser le tout et de le rendre beau.
  
  Par exemple, le formulaire d'inscription sur le site de phpbb:
  http://forums.phpbb-fr.com/ucp.php?mode=register
  
  Il est pas bô? Enfin bon, ça permettrait de bien gérer l'espace alloué à chaque objet.
  
  Je précise que j'ai essayé de faire avec les <li> mais ça ne marchait pas!
  
  0

Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention 923

une base possible :

<form>
	<p class="name">
		<label for="name">Nom</label>
		<input type="text" name="name" id="name"/>
		<span>Civilité Prénom NOM</span>
	</p>
</form>

et en CSS :

form p label,
form p span{
width:200px;
display:block;
}
form p input{
padding-left:220px;
float:left;
}

Dl, dt et dd sur une ligne

3 réponses

Discussions similaires

Newsletters