时间戳

首页 > 解决方案 > 垂直的

推动

html - 垂直的
推动

问题描述

我正在尝试在两个标题标签之间添加 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;
   }

标签： htmlcss

解决方案

flex align 指令不适用于任何其他显示然后 flex。您应该在父 div 上使用 display flex。这会让事情变得容易得多。Flexbox 可以轻松做你想做的事。我在这里使用内联样式来缩短代码。

<div style="display:flex">
  <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>

完全放弃hr会更好。

.flex {
  display: flex;
   margin-right: -0.75rem;
   margin-left: -0.75rem;
}

.flex > * {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  border-right: thin groove;
}

.flex > *:last-child {
  border-right: none;
}
    <div class='flex'>
      <h2>200+<br />Pack<br />Downloads</h2>
      <h2>7<br />Content<br />Packs</h2>
      <h2>4<br />More<br />Stuff</h2>
    </div>

推荐阅读