[英]How can I align three elements in a legend tag in the same line?
我有三个元素: <h1>
标签中的一个字母、一个<hr />
标签和一个图像。
这是它们在 html 中的样子:
<h1 class="red">  A  </h1>
<hr />
<img src="Immagini\images1.png">
我将所有内容放入<legend>
标签中,如下所示:
<legend align="right"><h1 class="red">  A  </h1><hr /><img src="Immagini\images1.png"></legend>
但是元素没有在同一行对齐,它们是一个在另一个之上。
如何在同一行中对齐所有元素?
这是完整的html:
<fieldset class="accordion"><legend align="right"><h1 class="red">  A  </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">  A  </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">  A  </h1><hr width="45%" class="rightalign" color="#e3e3e3" /><img src="Immagini\\images1.png" class="rightalign"> </legend></fieldset>
但是现在,当我更改窗口大小时,所有返回都未对齐。 我该如何解决这个问题?
/*css part */
h1,hr,img
{
display:inline-block;
vertical-align:middle;
}
/* this will work */
您可以在同一行的样式属性中使用display:inline
(这可以防止宽度和高度)和display:inline-block
。 但是,您可以轻松地在这些元素的父级上使用display:flex
您可以将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">  A  </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
。 您可以查看此答案以获取更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.