Наличие двух <legend>в fieldset - PullRequest
Новая
       39

Наличие двух <legend>в fieldset

0 голосов
/ 03 мая 2020

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

<fieldset style="width: 500px;">
    <legend style="display: block; margin: 0 auto;">
      <img style="height: 200px;" src="https://i.imgur.com/3RyXECr.jpg">
    </legend>

    <legend style="display: block;">
      <img style="height: 20px;" src="https://i.imgur.com/dOhyP62.png">
    </legend>

</fieldset>

enter image description here

1 Ответ

2 голосов
/ 03 мая 2020

Вы не можете, вам разрешено только одно ... просто расположите изображение абсолютно по отношению к родителю , не оборачивая его в legend

fieldset {
  position: relative;
  border:1px solid grey;
}

.close {
  position: absolute;
  right:0;
  top:100px; /* half height of legend image */
  transform:translate(50%, -50%);
  background:white;
  box-shadow: 0 0 0 4px white;
}
<fieldset style="width: 400px;">
    <legend style="display: block; margin: 0 auto;">
      <img style="height: 200px;" src="https://i.imgur.com/3RyXECr.jpg">
    </legend>
      <img style="height: 20px;" src="https://i.imgur.com/dOhyP62.png" class="close">

</fieldset>
...