javascript - 如何在同一行中对齐图例标记中的三个元素？

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 />左标签。我使用的字段集的示例可以在这里找到:Animated Series .

这样解决了:

.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

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