Может ли какой-либо элемент HTML быть назван как набор/легенда?

132
12

Используя свойство display, элементы HTML становятся взаимозаменяемыми с точки зрения стиля. Однако это не похоже на fieldset и legend.


Можно ли стиль других HTML-элементов выглядеть как fieldset и legend?

спросил(а) 2021-01-25T14:26:53+03:00 4 месяца, 4 недели назад
1
Решение
89

Предыдущий ответ неверен, если вы хотите узнать, зачем это нужно:


<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>

AFAIK не существует способа получить этот эффект нарушения границы, который элемент legend возникает на границе fieldset. Я не верю, что это возможно только с помощью CSS, это просто то, что является частью способа отображения тега fieldset.


Разъяснение. Я не знаю, как позиционировать блок или встроенный элемент таким образом, чтобы он охватывал видимую границу его содержащего элемента блока, а затем нарушал границу элемента контейнера за его коробкой. Это то, что a <legend> делает на границе с его содержимым <fieldset>.

ответил(а) 2021-01-25T14:26:53+03:00 4 месяца, 4 недели назад
88

Это работает очень хорошо, но ie6 будет немного странным, если фон - это изображение, ничего условного комментария не удалось исправить. Протестировано в IE6-8, FF3.6, Safari 5, Chrome 5

.fieldset {
position: relative;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: left;
}

.fieldset .legend {
background: #fff;
height: 1px;
position: absolute;
top: -1px;
padding: 0 20px;
color: #000;
overflow: visible;
}

.fieldset .legend span {
top: -0.5em;
position: relative;
vertical-align: middle;
display: inline-block;
overflow: visible;
}

<div class="fieldset">
<div class="legend">
<span>This is the title</span>
</div>
Test
</div>

ответил(а) 2021-01-25T14:26:53+03:00 4 месяца, 4 недели назад
76

Конечно, например: элемент DIV с границей и элемент дочернего заголовка с набором цветов фона, установленным для перекрытия границы DIV, будет выглядеть так же, как набор полей и легенда.


Очень простой пример:


<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>

ответил(а) 2021-01-25T14:26:53+03:00 4 месяца, 4 недели назад
45

Итак, я исправил код так, чтобы он выглядел несколько (он действительно похож на тег легенды), как и тег легенды.


    <div style="border: 2px groove #ccc">
<h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>

ответил(а) 2021-01-25T14:26:53+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема