Question

我一直在尝试添加“背景颜色”，但由于位置，在标题img和标题导航之间留下了一个很大的空隙。没有位置，标题导航将不是我想要的地方它是（向右）
（我不能使用任何引导程序或其他任何因为它不在我的教学大纲中而且我刚开始编写代码）

这是我的代码：

header {
  margin-top: auto;
  height: 79px;
  overflow: hidden;
}

header img {
  float: left;
  position: fixed;
  z-index: 2;
  top: 0;
}

header nav {
  float: right;
  position: fixed;
  z-index: 2;
  top: 0;
  height: 79px;
  left: 542px;
}

<header>
  <a href="index.html"><img src="images/greylogo.png" alt="E R I" /></a>
  <nav>
    <ul>
      <li> <a href=#> Home </a> </li>
      <li> <a href="aboutme.html"> About Me </a> </li>
      <li> <a href="events.html"> Events </a></li>
      <li> <a href="contact.html" target="_blank"> Contact Me </a></li>
    </ul>
  </nav>
</header>

Answer 1

定位标题而不是内容......

＆＃13;

header {
  height: 79px;
  overflow: hidden;
  position: fixed;
  width: 100%;
  background: lightblue
}

header img {
  float: left;
}

header nav {
  float: right;
}

header nav li { 
float:left;   
}

＆＃13;

<header>
  <a href="index.html"><img src="images/greylogo.png" alt="E R I" /></a>
  <nav>
    <ul>
      <li> <a href=#> Home </a> </li>
      <li> <a href="aboutme.html"> About Me </a> </li>
      <li> <a href="events.html"> Events </a></li>
      <li> <a href="contact.html" target="_blank"> Contact Me </a></li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 2

你的CSS很乱，我建议你学习使用像Bootstrap这样的库，它会让你轻松定位你的组件，回答你问你导航栏的问题是它有一个固定高度（79px）但你的清单（ul）大于79px。

如何更改具有固定位置的导航栏的颜色？

2 个答案: