垂直<hr>向下推动<h2> [重复]

由流言蜚語发布于 2020-04-09 05:14:22

第一次在这里发布。我正在尝试在两个标题标签之间获得2条垂直线，但是它一直将标题向下推...反正我可以解决这个问题吗？我尝试使用“ align-content：fex-start”和“ padding-top：10px”。

HTML和CSS

   <hr class="vertical-hr">
   <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
   <hr class="vertical-hr">
   <h2 class="inline-h">7<br />Content<br />Packs</h2>

（CSS）

   .inline-h {
   display: inline-block;
   width: auto;
   padding: 5px;
   }
   .vertical-hr {
   display: inline-block;
   height: 125px;
   }

LT_A

2020-04-09 05:14:22

Flexbox可以轻松完成您想做的事情。我在这里使用内联样式来缩短代码。

  <div style="display:flex; max-width:16rem">
  <hr class="vertical-hr">
   <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
   <hr class="vertical-hr">
   <h2 class="inline-h">7<br />Content<br />Packs</h2>
   </div>

shift

2020-04-09 05:14:22

.inline-h {
  width: auto;
  padding: 5px;
  float: left;
  margin: 15px 10px;
}

.vertical-hr {
  height: 125px;
  float: left;
}

<hr class="vertical-hr">
<h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
<hr class="vertical-hr">
<h2 class="inline-h">7<br />Content<br />Packs</h2>

nerror

2020-04-09 05:14:22

我认为您可以使您的生活更轻松一些，并使用Flexbox很好地对齐所有内容，请查看下面的代码。

.inline-h {
  width: auto;
  padding: 5px;
}

.vertical-hr {
  height: 125px;
}

div {
  display: inline-flex;
  align-items: center;
}

<div>
  <hr class="vertical-hr">
  <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
  <hr class="vertical-hr">
  <h2 class="inline-h">7<br />Content<br />Packs</h2>```
</div>

流言蜚語

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3314
注册排名
2613