Question

因此，我试图发出一些条形信号来表示不同的组件。我想制作一个横条，使其覆盖文本的整个高度，无论有多少行。如何使条形图从div的顶部延伸到底部？

具有设定高度的分隔线：

      .divider {
        display: inline-block;
        height: 20px;
        width: 3px;
        position: relative;
        border-radius: 30px;
        background: #0099ff;
        margin-left: 35px;
      }
            p {
      margin-left: 5px;
      font-size: 20px;
      color: var(--font-color);
      }

                  <div style="display: flex; align-items: center; ">
                    <div class="divider"></div><p>Messages</p>
                   </div>
                   <div style="display: flex; align-items: center; margin-top: -20px; ">
                    <div class="divider"></div><p>Messages <br> Test</p>
                   </div>

高度设置为100％的分隔线：

            .divider {
              display: inline-block;
              height: 100%;
              width: 3px;
              position: relative;
              border-radius: 30px;
              background: #0099ff;
              margin-left: 35px;
            }
                  p {
      margin-left: 5px;
      font-size: 20px;
      color: var(--font-color);
      }

                 <div style="display: flex; align-items: center; ">
                    <div class="divider"></div><p>Messages</p>
                   </div>
                   <div style="display: flex; align-items: center; margin-top: -20px; ">
                    <div class="divider"></div><p>Messages <br> google</p>
                   </div>

Answer 1

为什么不只在border-left本身上使用p？

p {
  border-left:6px solid #0099ff;
  padding-left: 15px;
  margin-left: 5px;
  font-size: 20px;
  color: var(--font-color);
}

p {
  border-left:6px solid #0099ff;
  padding-left: 15px;
  margin-left: 5px;
  font-size: 20px;
  color: var(--font-color);
}

                  <div style="display: flex; align-items: center; ">
                    <div class="divider"></div><p>Messages</p>
                   </div>
                   <div style="display: flex; align-items: center; margin-top: -20px; ">
                    <div class="divider"></div><p>Messages <br> Testd
                     asd
                     as<br>dsadasdas
                     as<br>dsadasdas
                     as<br>dsadasdas
                     as<br>dsadasdas
                     </p>
                   </div>

Answer 2

在.divider中使用min-height：100％而不是height：100％

Answer 3

您应该将'divider'设置为

标签，并将其类别设置为高度'100％'。

<p class="divider2">Messages <br> Test</p>

      .divider2 {
    height:100%;
    width: 3px;
    position: relative;
    border-radius: 30px;
    background: #0099ff;
    margin-left: 35px;
  }

enter link description here 谢谢。

如何扩展div以使其从上到下覆盖

3 个答案: