如何使<hr>与标题中的内容更接近？

Question

我希望使

消失了。这是我使用引导程序的第一个项目。

​

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!--Body -->
<header class="header row">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
    <div class="col-10 row">
      <h2 class="col-9 px-0 text-primary d-flex align-items-center">CHƯƠNG TRÌNH REBATE</h2>
      <div class="col-3 px-0">
        <div class="float-end d-flex justify-content-between">
          <i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
          <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
              <img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
              <span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
            </a>
            <div class="dropdown-menu bg-transparent border-0">
              <a href="#" class="dropdown-item">My Profile</a>
              <a href="#" class="dropdown-item">Settings</a>
              <a href="#" class="dropdown-item">Log Out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr style="height:1px;color:#1968B2;">
</header>

​

Answer 1

<hr style="height:1px;color:#1968B2; margin-top: -4px">

您可以根据您的使用情况调整边距顶部。

Answer 2

我建议您不要使用<hr>标记，而是使用一个新的css类或::after。

<header class="header row hr-bottom">

.hr-bottom {
    border-bottom: 1px solid black;
}

或

.hr-bottom::after {
    border-bottom: 1px solid black;
}

Answer 3

以最快的方式将类添加到人力资源中，例如条形图

<hr class="bar" style="height:1px;color:#1968B2;">

在CSS中添加类：

 .bar {
   transform: translateY(-10px);
 }  

价值取决于你，它可能需要px或采购