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 */

Answer 2

您可以在样式属性中为同一行使用display:inline（这可以防止宽度和高度）和display:inline-block。但是，您可以在这些元素的父元素上轻松使用display:flex

Answer 3

图例和内部元素都可以使用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以获得更多详细信息。

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

3 个答案: