如何將徽標向上推並對齊<hr>與 img

Question

如何使徽標浮動並與它被按下的導航欄對齊，因為我不知道我已經嘗試了我知道的所有填充技巧，我還希望 img 用<hr> .. 所以我想要<hr>就在 img 的頂部。

<body>
  <!-- Here is the header-->
  <header id="Home">
      <div class="nav-bar">
        <div class="funBus-logo"><a href="#">Fun Bus</a></div> 
            <nav>
        <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Blog</a>
          <a href="#">Contact</a>
              </nav>
        </div>
        <hr>
      <div class="image"><img src="/img/fun-bus.jpg" alt="fun-bus"></div>
    </header>

Answer 1

考慮使用border-image 屬性

但無論如何，將 hr 元素的邊距重置為 0。默認情況下，它周圍有一點邊距。

 hr { color: red; } .hr-wihout-margin { margin: 0; }

 <!-- Here is the header--> <header id="Home"> <div class="nav-bar"> <div class="funBus-logo"><a href="#">Fun Bus</a></div> <nav> <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </div> <br /> <hr class="hr-wihout-margin" /> <div class="image"> <img width="450" src="https://i.stack.imgur.com/wPTBW.jpg" alt="fun-bus"> </div> </header>

如何將徽標向上推並對齊<hr>與 img

問題描述

1 個解決方案

解決方案1
1 2019-12-13 12:53:41

如何將徽標向上推並對齊<hr>與 img

問題描述

1 個解決方案

解決方案1 1 2019-12-13 12:53:41

解決方案1
1 2019-12-13 12:53:41