Значения CSS по умолчанию для набора полей ‹легенда›

Я пытаюсь использовать <legend> в качестве заголовка внутри <fieldset>.

В браузерах, отличных от IE, <legend> располагается на верхней границе <fieldset>, а текст идеально располагается по центру строки.

альтернативный текст

Я пытаюсь сбросить его положение, чтобы он сидел так же, как и любой другой элемент. то есть <h3>.

Вот тот CSS, который у меня есть на данный момент.

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

Но легенда по-прежнему находится точно по центру строки.

Да, я могу добавить координату поля/отступа/верхней части, но я хочу знать, есть ли в браузере какие-либо значения по умолчанию для элемента, запускающего этот макет. Затем я хочу переопределить эти значения.

Протестировано в Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)

Обновление. Я оставлю этот вопрос открытым еще на неделю на тот случай, если кто-то УЖЕ смог стилизовать <legend> элементов. Если решений не найдено, я приму ответ @jnpcl.


html css fieldset legend
person Marko    schedule 19.10.2010    source источник
comment
Вы ориентируетесь на IE? Или вы ориентируетесь только на Firefox, Chrome и Safari?   -  person Richard JP Le Guen    schedule 20.10.2010
comment
@LeguRi, я ориентируюсь на все современные браузеры, то есть на все, что вы упомянули. Используя мои CSS-свойства выше, IE поместил легенду туда, где я хочу.   -  person Marko    schedule 20.10.2010
comment
Я почти отказался от тега legend из-за того, что его не хотят стилизовать. В последней форме, над которой я работал, я швырнул клавиатуру в монитор и вместо этого использовал h3 s...   -  person Yi Jiang    schedule 20.10.2010
comment
@Yi Jiang: Угадайте, на полу стоит разбитая кофейная чашка, и я использую теги <h3>.   -  person Marko    schedule 20.10.2010
comment
Тег LEGEND плохо поддерживается в большинстве браузеров. Вы будете бороться с этим всеми способами. В конце концов я решил использовать теги заголовков. Не идеальный семантически, но казался самым прагматичным маршрутом.   -  person DA.    schedule 20.04.2011
comment
Я нашел это полезным и помог мне решить ту же проблему mattheerema.com/articles/web-design/2006/04/   -  person John Magnolia    schedule 10.07.2015

Ответы (6)


arrow_upward
9
arrow_downward

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

Проще говоря, в разных браузерах невозможно разместить элемент LEGEND в наборе полей.

Обходной путь: оберните текст из <legend> в <span>, затем переместите <span>.

person drudge    schedule 19.10.2010
comment
ненавижу быть злым, но вы прочитали весь вопрос? Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values. - person Marko; 20.10.2010
comment
Из статьи, которую я связал, видно, что значения по умолчанию не могут быть переопределены. - person drudge; 20.10.2010
comment
Если он ориентируется на все современные браузеры, то в этом я с @jnpcl. +1 - person Richard JP Le Guen; 20.10.2010
comment
Я уберу свой отрицательный голос, так как вы удалили код, который использовал позиционирование. - person Marko; 20.10.2010
comment
Ссылка, похоже, умерла в какой-то момент с момента публикации этого ответа. - person Michael Cordingley; 15.07.2015
comment
@MichaelCordingley Я исправил ссылку. - person ax.; 04.11.2016
comment
Просто к сведению, что упаковка тега <legend> в <span> работает для позиционирования, но нарушает доступность с помощью программы чтения с экрана/рассказчика. Он не сможет изначально сгруппировать родительский элемент <fieldset> с тегом <legend>. - person Tony Anziano; 23.08.2019

arrow_upward
32
arrow_downward

Достаточно :

 form legend{
    float: left;
    width: 100%;
 }
person Neoweiter    schedule 20.12.2013
comment
Это лучший ответ, даже в 2018 году. - person WebMW; 17.11.2018
comment
Должен быть выбранный ответ. Я тестировал IE11, Firefox, Chrome и Safari. Это делает работу для простой текстовой легенды. - person Weston; 18.11.2019
comment
Да, это лучший ответ! - person MNN TNK; 13.11.2020

arrow_upward
2
arrow_downward

Я только что стилизовал свои <legend>, присвоив им position: absolute; top: -25px;, а родителю <fieldset> position: relative; padding-top: 30px;.

person BWLR    schedule 20.04.2011

arrow_upward
0
arrow_downward

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

person Fla    schedule 19.02.2018

arrow_upward
0
arrow_downward

Согласно HTML — Уровень жизни. , следующие стили работают как по умолчанию:

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}
person Reza Mamun    schedule 30.11.2018

arrow_upward
0
arrow_downward

Согласно спецификации, легенда является только отображаемой легендой. если это float: none.

Это означает, что, выполнив:

<fieldset>
    <legend style='float: left'> Heading </legend>
    <div class='clearfix'></div>
    <!-- Your form elements here -->
</fieldset>

Это заставляет легенду вести себя как обычный (если плавающий) элемент.

Примечание. clearfix — это класс очистки Bootstrap:

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    display: table;
    content: " ";
}

(Похожий ответ уже был опубликован, но он не включает трюк с очисткой и ссылку на спецификацию, которая показывает, что это не случайное, а определенное поведение, которое является надежным.)

person deltragon    schedule 23.04.2021