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

Posted 2023-03-10

【中文标题】如何使我的标题更小并提升我的品牌和导航？

【英文标题】：How do I make my header smaller and push up my branding and nav?

【发布时间】：2021-07-27 13:04:03

【问题描述】：

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

在尝试了“身高：”等简单的事情之后，我还无法将标题变小，而且当我尝试提升品牌和导航时，导航会上升，但品牌不会上升。这是我正在使用的 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>

【问题讨论】：

@media (max-height:500px) 是检查横向的一种非常简单的方法。这仅适用于智能手机。更智能的媒体查询是：@media only screen and (orientation: landscape)。最后但同样重要的是，top 属性仅在与position 属性（例如sticky、absolute 或fixed）结合使用时才会生效。

请更加清晰和具体。 push up 和 make my header smaller 是什么意思？将徽标和品牌推到其他元素之上，流式还是分层？更小：垂直还是水平？小了多少？

【参考方案1】：

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

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

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

header #branding 
  line-height: 20px;