Вопросы Теги

Какой-либо элемент HTML может быть разработан как fieldset/legend?

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

Действительно ли возможно разработать другие элементы HTML для сходства с fieldset и legend?

8
задан Jakob 17 July 2010 в 10:00
поделиться

3 ответа

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

<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.

Clarification: Я не знаю никакого способа расположить блочный или инлайн-элемент так, чтобы он пересекал видимую границу содержащего его блочного элемента, а затем вызывал разрыв границы элемента-контейнера за его блоком. Именно это делает с границей содержащего его элемента

.

3
ответ дан 5 December 2019 в 20:12
поделиться

Конечно, например: элемент 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>
2
ответ дан 5 December 2019 в 20:12
поделиться

Это работает довольно хорошо, но 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>
3
ответ дан 5 December 2019 в 20:12
поделиться