如何缩小标题并提升我的品牌和导航？

问题描述

我正在尝试在横向模式下缩小标题并提升品牌和导航。

在尝试过诸如“高度：”等简单的事情之后，我一直无法使标题更小，而且当我尝试推高品牌和导航时，导航会上升，但品牌没有上升。这是我使用的 HTML 和 CSS。

有人可以帮忙吗？ 此外，我目前正在通过 YouTube 上的教程进行学习……有人为刚入门的初学者提供任何建议的阅读材料或备忘单吗？

/* Landscape */

@media (max-height:500px) {
  header {
    min-height: 0px;
  }
  header #branding,header nav {
    margin-top: 0px;
    top: 0%
  }
}

<header>
  <div class="container">
    <div id="branding">
      <h1>
        <span class="highlight">Acme</span> Web Design
      </h1>
    </div>
    <nav>
      <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
      </ul>
    </nav>
  </div>
</header>

解决方法

我建议您将容器转换为 flexbox，然后垂直对齐：

.container {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

为了使标题更小，您应该提供完整的 CSS，以便我可以看到发生了什么。但简而言之，您可以降低行高：

header #branding {
  line-height: 20px;
}