显示：弯曲；在标题中没有效果答案

【问题标题】：display: flex; has no effect in header显示：弯曲；在标题中没有效果
【发布时间】：2020-09-22 15:28:11
【问题描述】：

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

这个问题是由以下代码中的错误引起的吗？网页设计新手，任何人都可以找到我的代码有什么问题。我想在 <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>

【问题讨论】：

尝试评论你的resetcss，留下style.css
@Electro Voyager 徽标和导航栏在同一行.. 工作正常.. 你想做什么？
实际上导航内容（这里链接标签）应该在标志的右侧。像行一样。
给标题标签justify-content: space-between;
@Electro Voyager .. 一切都是为了压倒一切。 ..一般代码逐行执行...简短说明

标签： html css web web-site-project

【解决方案1】：

在文本周围加上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/

【讨论】：

【解决方案2】：

header{ flex-direction: column; }

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

【讨论】：

代码在没有 cssreset 和添加 flex-direction: column with cssreset 的情况下工作正常。

【解决方案3】：

是的，终于在这个论坛的帮助下，我明白了我的错误。正如你们所说的那样， cssreset 造成了麻烦。我需要先 cssReset.css 然后我的自定义 styles.css 才能获得正确的效果。否则使用styles.css 做出的效果会被cssReset.css 覆盖一个简单的错误。谢谢大家。

【讨论】：