时间戳

首页 > 解决方案 > 如果我的标题元素中有一个导航栏，是否可以在调整大小时将其放下？

html - 如果我的标题元素中有一个导航栏，是否可以在调整大小时将其放下？

问题描述

我正在寻找我的导航栏，那就是我的标题

<header>
  <nav style="width: 960px; margin: auto; padding-top: 20px;">
    <div id="myName">
      Grayson McMurry
    </div>
    <div id="myNav">
      <!--id tag used because the content is unique-->
      <a href="index.html">About</a> |
      <a href="portfolio.html">Portfolio</a> |
      <a href="contact.html">Contact</a>
    </div>
  </nav>
  <div class="clear"></div>
  <hr style="margin: 0px;" />
  <!--line in html styled-->
</header>

这是随之而来的CSS

#myNav {
  float: right;
  margin: auto;
  text-align: center;
  font-family: "Georgia", Times, "Times New Roman", serif;
  padding: 30px;
  font-size: 25px;
  font-weight: bold;
  color: #d3d3d3;
}

我希望能够在调整网页大小以使其具有移动响应能力时将其放下。是否可以在页眉元素中使其更高或将其完全从页眉元素本身中删除？

标签： htmlcss

解决方案

一些调整。

  1. 删除导航元素上的设置宽度。
  2. 从您的导航链接中删除float并让 flexbox 完成所有工作..

我已经删除了你的内联样式并navWrapper在你的nav元素上添加了一个包装 id。

结果：

HTML：

<header>
  <nav id="navWrapper">
    <div id="myName">
      Grayson McMurry
    </div>
    <div id="myNav">
      <!--id tag used because the content is unique-->
      <a href="index.html">About</a> |
      <a href="portfolio.html">Portfolio</a> |
      <a href="contact.html">Contact</a>
    </div>
  </nav>
  <div class="clear"></div>
  <hr style="margin: 0px;" />
  <!--line in html styled-->
</header>

CSS：

#navWrapper {
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#myNav {
  text-align: center;
  font-family: "Georgia", Times, "Times New Roman", serif;
  padding: 30px;
  font-size: 25px;
  font-weight: bold;
  color: #d3d3d3;
  margin-left: auto;
}

推荐阅读