Как да накараме легендата да разшири пълната ширина на полето и да поддържа подложка за съдържание? - html, css

Моята цел е да направя набор от линии с граница и легенда да бъдат разположени отгоре с цвят на фона. Цветът на фона на легендата трябва да се простира до цялата ширина на полевото поле.

Базиран на Направете легенда пълна ширина в полето, Започнах със следния jsfiddle: http://jsfiddle.net/pdgreen/wcYXX/0.

Изглежда добре, но fieldset няма подложка, така че елементите на формата са твърде близо до границите. Когато добавя в подложката, оставам с: http://jsfiddle.net/pdgreen/wcYXX/1/.

Съдържанието изглежда добре, но заглавието не удължава ширината на fieldset.

Ако заобиколя съдържанието с a div, Мога да добавя в подложката: http://jsfiddle.net/pdgreen/wcYXX/2/това обаче изисква допълнително div.

Има ли начин да го направим да изглежда като третата цигулка, без допълнително div?

Отговори:

Да, като противодействаме на запълването на fieldset с отрицателен марж на легендата. Нещо като това: http://jsfiddle.net/wcYXX/3/

Зададох полето на полето до -5px (същото като подложката на fieldset, но отрицателно) и след това добавих 5px подложка, за да поставя текста обратно там, където принадлежи.

Това също означава, че вече не се нуждаете от граничната кутия, която не се поддържа добре от старите браузъри.

CSS на fieldset сега изглежда така:

fieldset legend {
background: #369;
color: #FFF;
font-weight: 700;
text-align: left;
white-space:nowrap;

margin: -5px;
padding: 5px;
display: block;
width: 100%;

}