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

В соответствии с несколькими ссылками в Интернете невозможно разместить легенду. Поэтому предлагается обернуть его диапазоном:Как разместить легенду внутри поля с рамкой?

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

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

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

источник

2011-02-01 nocss guy

Позвольте мне убедиться, что я прав; Вы хотите знать, как вы можете переместить легендарный ярлык из его исходного положения, а затем закрыть промежуток в верхней границе? Если да, то зачем даже использовать набор меток легенд? – diceler

+19

Вы сделали бы это для семантики и доступности. Визуальный стиль элемента имеет мало общего с тем, как обрабатывает его (например, программа чтения с экрана). – Jared

Странно, что это нельзя изменить, поскольку я думал, что все стили по умолчанию в браузерах были установлены через таблицы стилей пользовательских агентов. –

-14

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

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

Дайте границу легенды теге

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

источник

2011-02-01 09:22:16

Почему это нисходящее? –

@Craig Wayne Потому что этот ответ не решает проблему? –

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

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

источник

2011-02-01 12:32:39 Chugworth

Установка крайнего края не работает хорошо, так как легенда по-прежнему смещена относительно поля. Его выравнивание изменяется по мере изменения высоты легенды. – brad

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

источник

2011-02-01 15:04:31

Контур полезен, если вам не нравятся пользователи IE 5/6/7 (все еще хороший кусок людей). Поддержка IE 8 и Firefox (все текущие версии) также пятнистые. Если бы поддержка браузера была лучше, это был бы лучший вариант (пока вы не пытаетесь сделать какие-либо эффекты пограничной границы, такие как закругленные углы)! http://reference.sitepoint.com/css/outline – Jared

+10

Я очень рад сообщить, что в 2013 году пользователь IE5/6/7 больше не является хорошим куском людей. Я думаю об этом, и это меня очень радует :) –

Это не решает проблему при наличии цветных фонов для полей – feeela

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

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

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

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

источник

2012-10-16 09:56:33

Спасибо за этот комментарий. Я не понимал, насколько относительная и абсолютная работали вместе, пока не увидели/не попытались. –

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

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

источник

2012-12-12 16:27:17 Marthein

Это недопустимый html (по крайней мере, от html5). – Nathan

-3

Нашел наиболее последовательным, испытанные в IE7, Firefox и Chrome

fieldset legend { text-align:left; }

источник

2012-12-17 12:13:41 user1106135

Какой бесполезный ответ. –

Это не отвечает на вопрос, касающийся прежде всего вертикального позиционирования, а не выравнивания текста. –

-3

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

источник

2014-03-23 13:10:21

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

fieldset { 
padding-top:50px; 
} 

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

источник

2014-05-14 13:31:05 user3515900

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

Codepen образец: http://codepen.io/vkjgr/pen/oFdBa

источник

2014-07-08 09:07:37

Да, я приземлился на этой странице из Google, и был удивлен, что 'float: left' был настолько далеко по странице, что, очевидно, самый простой ответ. – Ben

Это лучшее решение. Он чувствует себя намного лучше, чем использование абсолютного позиционирования или любых дополнительных элементов. –

Да лучше, чем абсолютное позиционирование. Легенда может иметь собственную высоту. –

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

Это вызовет вопрос:

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

Это будет не

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

...

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

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

источник

2014-08-01 06:40:24

Ну, но, обернув «легендой» в HTML, вы создадите недопустимую структуру! –

-2

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

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

источник

2015-02-04 19:25:57 user1286322

Пожалуйста, добавьте некоторое объяснение в свой ответ о том, как это решает проблему – Huangism

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

ответ

Смежные вопросы