html - 显示：弯曲；在标题中没有效果

问题描述

无法通过在 CSS 中应用 flex 使徽标和文本在网页标题标签上连续显示。我的代码与这篇文章一起，最后还在网络浏览器（Chrome）上附加了输出..

这个问题是由以下代码中的错误引起的吗？网页设计新手，任何人都可以找到我的代码有什么问题。我想在<header>标签上应用 flex，以便 img 和<nav>content 连续。但这并没有发生。请参阅帖子末尾的网页截图。

.container {
  width: 1024px;
  min-height: 300px;
  margin-left: auto;
  margin-right: auto;
}

header {
  background-color: #63BC7D; 
  min-height: 100px;
  display: flex;
}

main {
  /*background-color: #179E3F; */
  min-height: 300px;
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/

}

.cards {
  background-color: #AC1149;
  min-height: 300px;
  display: flex;
  justify-content: space-between; 

}

.card1 {
  background-color: #6EB806;
  min-height: 300px;
  width: 30%;
}

.card2 {
  background-color: #36E059;
  min-height: 300px;
  width: 30%;
}

.card3 {
  background-color: #00FF09;
  min-height: 300px;
  width: 30%;
}

.herobox1 {
  flex: 2;
  /*background-color: #8D4E85;*/
}

.herobox2 {
  /*background-color: #684F96;*/
  flex: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bike Repair Shop</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="cssReset.css">
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">
        <img src="https://via.placeholder.com/140x100" alt="Website Logo">
      </div>
      <nav>
        <a href="">Book</a>
        <a href="">Online</a>
        <a href="">About</a>
        <a href="">Contact</a>
      </nav>

    </header>
    <main>
      <div class="herobox1">
        <h1>Mobile bike repairs </h1>
        <p>Many people have difficulty getting their bikes to a bike shop. We call to your office or home anywhere in greater Dublin.</p>
        <p>Fast, convenient bike servicing with up-front pricing. All without the hassle of taking your bike into a shop. </p>
      </div>
      <div class="herobox2">
        <img src="https://via.placeholder.com/140x100" alt="Person servicing bike in Dublin">
      </div>
    </main>
    <div class="cards">
      <div class="card1"></div>
      <div class="card2"></div>
      <div class="card3"></div>
    </div>
  </div>
</body>
</html>

标签： htmlcsswebweb-site-project

将 a 包裹div在文本周围并添加 apadding-top似乎可以解决它。

  <nav>
    <div style="padding-top: 18%;">
      <a href="">Book</a>
      <a href="">Online</a>
      <a href="">About</a>
      <a href="">Contact</a>
    </div>
  </nav>

https://jsfiddle.net/sLmj568x/

html - 显示：弯曲；在标题中没有效果

问题描述

解决方案

推荐阅读