web-dev-qa-db-fra.com

Comment positionner la légende à l'intérieur d'un fieldset avec une bordure?

Selon les nombreuses références sur le web, il n'est pas possible de positionner une légende. Il est donc suggéré de l'envelopper avec span:

<legend><span>Foo</span></legend>

Ensuite, nous pouvons positionner le span à l'intérieur du fieldset. mais quand je veux ajouter une bordure au-dessus du champ, il y a un espace pour la légende. Heureusement, j'ai trouvé que l'ajout d'une bordure à la légende corrige également ce petit écart minuscule, mais c'est une solution laide (comme tout le reste avec CSS). Avez-vous des solutions plus valables à ce problème?

note: J'ai trouvé la solution simultanément, après avoir commencé à écrire cette question, je veux donc toujours la poser.

cssformslegendfieldset
27
nocss guy

J'ai trouvé ça simple float:left pour LEGEND fera l'affaire.

Exemple de Codepen: http://codepen.io/vkjgr/pen/oFdBa

78
Veiko Jääger

Je sais que c'est une vieille question, mais j'ai eu cette page quand j'ai googlé "position de la légende du champ", et je n'ai vraiment pas pu trouver une bonne réponse.

La légende ne se comportera tout simplement pas!, Donc la meilleure solution que j'ai trouvée était de la positionner de manière absolue et d'avoir un dessus rembourré sur le terrain. Exemple JSFildle: http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset {
    position:relative;
    padding-top:50px;
}

legend {
    position:absolute;
    top:20px;
    left:18px;
}​
72
Carlos Martinez T

Utilisez un contour au lieu d'une bordure: http://jsfiddle.net/leaverou/gtNnT/

12
Lea Verou

L'OP a presque répondu à sa propre question: l'emballage fait l'affaire, mais c'est l'inverse. Utilisation:

<span><legend>Foo</legend></span>
10
Marthein

Définissez des marges pour le positionnement. Cela fonctionne sans problème.

legend {margin-left:50px;} /* 50px from Left of the Fieldset */
2
Chugworth

Vous pouvez utiliser "-50px" en bas pour la légende et "50px" en haut pour le jeu de champs afin de ne pas se chevaucher.

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}
1
user3515900