Как разместить легенду внутри поля с рамкой?

Согласно нескольким ссылкам в Интернете, невозможно разместить легенду. Поэтому предлагается обернуть его span:

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

Затем мы можем поместить пролет внутри набора полей. но тогда, когда я хочу добавить границу поверх набора полей, есть пробел для легенды. К счастью, я обнаружил, что добавление границы к легенде также устраняет этот маленький, крошечный разрыв, но это уродливое решение (как и все остальное с css). У вас есть более верные решения этой проблемы?

note: Я нашел решение одновременно, после того, как начал писать этот вопрос, поэтому я хочу его еще спросить.

Ответы

Ответ 1

Я думаю, что это сработает

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

Придать границе тегу легенды

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

Ответ 2

Я знаю, что это старый вопрос, но у меня есть эта страница, когда я googled "положение легенды на поле", и я действительно не мог найти хороший ответ.

Легенда просто не будет вести себя!, поэтому лучшее решение, которое я нашел, это установить его абсолютным и иметь верхнюю часть прокладки на полевом наборе. Пример JSFildle: http://jsfiddle.net/carlosmartinezt/gtNnT/356/

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

legend {
    position:absolute;
    top:20px;
    left:18px;
}

Ответ 3

Я обнаружил, что простой float:left для LEGEND выполнит задание.

Codepen sample: http://codepen.io/vkjgr/pen/oFdBa

Ответ 4

Используйте контур вместо границы: http://jsfiddle.net/leaverou/gtNnT/

Ответ 5

ОП почти ответил на свой вопрос: обертывание делает трюк, но наоборот. Использование:

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

Ответ 6

Установите поля для позиционирования. Он работает без проблем.

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

Ответ 7

Вы можете использовать margin-bottom "-50px" для обозначения легенды и верхнего слоя "50px" для набора полей, поэтому не перекрывайте.

fieldset { 
padding-top:50px;
}

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

Ответ 8

Пока legend не является прямым потомком набора полей, это не вызовет проблемы.

Это вызовет проблему:

<fieldset>
    <legend>Legend</legend>
</fieldset>

Это не будет

<fieldset>
    <div>
        <legend>Legend</legend>
    </div>
</fieldset>

...

Если вам нужно, вы можете использовать javascript для обертывания набора полей.

$('fieldset').wrapInner( "<div></div>");

Ответ 9

Это кажется мне более прямым.

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

Ответ 10

Нашел это наиболее согласованным, протестированным в IE7, Firefox и Chrome

fieldset legend { text-align:left; }

Ответ 11

В итоге я использовал только элементы div. В конце концов, мне просто нужна граница и текст над границей, что он.