css - ejemplos - form html

¿Cómo colocar la leyenda dentro de un fieldset con un borde?

Question

Esta pregunta ya tiene una respuesta aquí:

• Evite que el borde del elemento fieldset pase por el elemento de leyenda 2 respuestas

Según las diversas referencias en la web, no es posible posicionar una leyenda. Por lo tanto, se sugiere envolverlo con span:

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

Entonces podemos ubicar el lapso dentro del fieldset. pero cuando quiero agregar un borde en la parte superior del fieldset, hay un espacio para la leyenda. Afortunadamente, he encontrado que agregar bordes a la leyenda también soluciona este pequeño espacio, pero esa es una solución fea (como todo lo demás con CSS). ¿Tienes más soluciones válidas para este problema?

Nota: He encontrado la solución al mismo tiempo, después de que comencé a escribir esta pregunta, así que quiero seguir preguntándola.

Answer 1

Creo que esto funcionará

 <legend><span>ur text</span></legend>

Dar borde a la etiqueta de leyenda

legend {padding: 2px;border: 1px solid green;}

Answer 2

El OP casi responde su propia pregunta: envolver hace el truco, pero es al revés. Utilizar:

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

Answer 3

Encontré ese float:left simple float:left para LEGEND hará el trabajo.

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

Answer 4

Encontré este el más consistente, probado en IE7, Firefox y Chrome

fieldset legend { text-align:left; }

Answer 5

Establecer márgenes para el posicionamiento. Funciona sin problemas

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

Answer 6

Esto me parece más directo.

fieldset legend {
position:relative;
left:20px;
}

Answer 7

Puede usar margin-bottom "-50px" para leyenda y padding-top "50px" para fieldset, así que no se superponga.

fieldset {
padding-top:50px;
}
fieldset legend {
margin-bottom:-50px;
}

Answer 8

Sé que esta es una vieja pregunta, pero obtuve esta página cuando busqué en Google "posición de leyenda de campo", y realmente no pude encontrar una buena respuesta.

¡La leyenda simplemente no se comportará !, por lo que la mejor solución que encontré fue posicionarla de manera absoluta y tener un margen superior en el campo. Ejemplo de JSFildle: http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset {
position:relative;
padding-top:50px;
}
legend {
position:absolute;
top:20px;
left:18px;
}​

Answer 9

Terminé usando solo elementos div. Al final, solo necesito el borde y el texto sobre el borde, eso es todo.

Answer 10

Use un contorno en lugar de un borde: http://jsfiddle.net/leaverou/gtNnT/