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

Question

I have three elements: a letter in a <h1> tag, a <hr /> tag and an image.
This is how they are in html:

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

I put all into a <legend> tag, like this:

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

but the elements are not aligned in the same line, they are one over the other.
How can I align all the elements in the same line?
This is the complete html:

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

The class="red" is only to give the red color.
The class="accordion" only contains this:

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

Definitely, I want something like this:

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

but all aligned on the same line and using the <fieldset> border instead of the <hr /> left tag. An example of the fieldset I use can be found here: Animated Series .

Solved with this:

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

But now, when I change the size of the window, all returns not aligned. How can I solve this?

Answer 1

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

Answer 2

You can use display:inline (this prevents width and height) and display:inline-block in style attribute for same line. However you can easily use display:flex on the parent of these elements

Answer 3

You can use display:inline-block for both legend and inner element. Here is the code sample-

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

You can also use display:flex but the problem is with the fieldset and legend tags. fieldset and legend tag not work with flexbox . You can see this answer for more details.