Как выровнять три элемента в теге легенды в одной строке?

Question

У меня есть три элемента: буква в теге <h1>, тег <hr /> и изображение.
Вот как они в html:

<h1 class="red">&nbsp A &nbsp</h1>
<hr />
<img src="Immagini\images1.png">

Я поместил все в тег <legend>, например:

<legend align="right"><h1 class="red">&nbsp A &nbsp</h1><hr /><img src="Immagini\images1.png"></legend>

но элементы не выровнены в одной строке, они расположены один над другим.
Как я могу выровнять все элементы в одной строке?
Это полный HTML-код:

<fieldset class="accordion"><legend align="right"><h1 class="red">&nbsp A &nbsp</h1><hr /><img src="Immagini\images1.png"></legend></fieldset>

class="red" только для того, чтобы дать красный цвет.
class="accordion" содержит только это:

.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}

Определенно, я хочу что-то вроде этого:

<hr width="45%" style="float: left" /><h1 class="red" style="float: left">&nbsp A &nbsp</h1><hr width="15%" style="float: left" /><img src="Immagini\images1.png" style="float: left">

, но все выровнены на одной строке и используют границу <fieldset> вместо левого тега <hr />. Пример набора полей, который я использую, можно найти здесь: Мультсериал .

Решено с этим:

.rightalign {
display:inline-block;
vertical-align:middle;
}
.accordion {
cursor: pointer;
transition: 0.4s;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
padding: 0%;
border-top-style: outset;
}

<fieldset class="accordion"><legend style="width: 52%" align="right"><h1 class="rightalign" style="color: red">&nbsp A &nbsp</h1><hr width="45%" class="rightalign" color="#e3e3e3" /><img src="Immagini\images1.png" class="rightalign">
</legend></fieldset>

Но теперь, когда я изменяю размер окна, все возвраты не выравниваются. Как я могу решить это?

Answer 1

Вы можете использовать display:inline-block как для легенды, так и для внутреннего элемента. Вот пример кода -

.accordion {
    cursor: pointer;
    transition: 0.4s;
    border-left-style: none;
    border-bottom-style: none;
    border-right-style: none;
    padding: 0%;
    border-top-style: outset;
}
.legend {
    display: inline-block;
   	vertical-align: middle;
    width:100%;
}

<fieldset class="accordion">
  <legend class="legend">
    <hr style="display:inline-block" width="45%"/><h1 class="red" style="display:inline-block">&nbsp A &nbsp</h1><hr width="15%" style="display:inline-block"/><img style="display:inline-block" src="Immagini\images1.png">
  </legend>
</fieldset>

Вы также можете использовать display:flex, но проблема в тегах fieldset и legend. Тег fieldset и legend не работает с flexbox. Вы можете увидеть этот ответ для более подробной информации.

Answer 2

        /*css part */
          h1,hr,img
             {
                display:inline-block;
                vertical-align:middle;
              }
             /* this will work */

Answer 3

Вы можете использовать display:inline (это предотвращает ширину и высоту) и display:inline-block в атрибуте стиля для той же строки. Однако вы можете легко использовать display:flex на родительском элементе этих элементов