我不能将列表项（nav）放在标题内

Question

当我在CSS中设置样式时，我无法使位于标题背景（导航）内的列表项在标题下移。

这是我的代码：

body {
  font: 15px/1.5 Arial, sans-serif, Helvetica;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hiddan;
}

header {
  background: #35424a;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  padding: 0;
  margin: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

<header>
  <div class="container">
    <div id="branding">
      <h1>my company</h1>
    </div>
    <nav>
      <ul>
        <li> <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>

Answer 1

使用此代码可以为您提供帮助。 我添加了这个CSS：

nav {
  display: inline-block;
  width: 100%;
}

body {
  font: 15px/1.5 Arial, sans-serif, Helvetica;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hiddan;
}

header {
  background: #35424a;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  padding: 0;
  margin: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}
nav {
  display: inline-block;
  width: 100%;
}

  <header>
    <div class="container">
      <div id="branding">
        <h1>my company</h1>
      </div>
      <nav>
        <ul>
          <li> <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>

Answer 2

您在CSS中犯了一个错误： 它的拼写正确：overflow: hidden