显示：flex;对标题无效

问题描述

通过在CSS中应用flex，无法使徽标和文本连续显示在网页的标题标签上。我的代码随此帖子一起发布，并在最后附加了Web浏览器（Chrome）上的输出。

此问题是由以下代码中的错误引起的。 Webdesign的新手，任何人都可以找到我的代码有什么问题。我想在<header>标记上应用flex，以便将img和<nav>的内容放在一行中。但这没有发生。请参阅文章末尾的网页截图。

.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>

解决方法

将div包裹在文本周围并添加padding-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/

header{ flex-direction: column; }

将此代码添加到您的CSS代码中。

是的，终于在这个论坛的帮助下，我理解了我的错误。正如您所说的，cssreset造成了麻烦。我需要先cssReset.css，然后是我的自定义styles.css，以获得正确的效果。否则cssReset.css会覆盖使用styles.css产生的效果。一个简单的错误。谢谢大家。

html web web-site-project