如何在CSS中将我的主页按钮按到标题的左上角？

Question

`<header>
   <img src="images/chefs-hat.png">
   <p>Popular Recipes</p>
   <button class="home">
   <a href="index.html">Home</a>
   </button>    
 </header>



.home {
   width: 100px;
   text-decoration: none;
   float: left;
   display: block;
  font-size: 20px; 
 }`

html / Css home（a）部分。想知道如何将这个元素推到标题的左上角。

Answer 1

为什么不在容器顶部写下您的主页按钮？你为什么需要float: left？你必须解释它，否则我认为它不是必要的。

.home {
  display: block;
  width: 100px;
  font-size: 20px;
  margin-bottom: 1rem;
}

.home a {
  text-decoration: none;
  color: #000;
}

<header>
  <button class="home">
    <a href="index.html">Home</a>
  </button>
  <img src="http://via.placeholder.com/350x150" alt="placeholder" />
  <p>Popular Recipes</p>
</header>

Answer 2

使用此CSS。有关绝对定位的更多信息，请访问：https://www.w3schools.com/css/css_positioning.asp

header {
  position: relative;
}

.home {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100px;
  text-decoration: none;
  display: block;
  font-size: 20px; 
}