html - Ul 菜单不会在容器中留下 float

Question

<ul> header 不是从容器最大宽度开始的。我添加了文本以显示容器的位置，为什么菜单不也从那里开始？

https://codepen.io/audn/pen/LLvdGb

ul.menu {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background-color:#1f3647;
    width:100%;
    color:#798892;
}
.active{
   background-color: #101d26;
}
li.menu {
    float: left;
}
li.menu a {
    display: block;
    color:#798892 ;
    padding: 20px 20px;
    text-decoration: none;
}
li a:hover {
    background-color: #101d26;
} 
.container{
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"> 
<div class="container">
     nboi
</div>
 <ul class="menu">
   <div class="container">
      <li class="menu"><a href="#"><i class="material-icons">&#xE88A;</i></a></li>
      <li class="menu"><a href="#"><i class="material-icons">&#xE30C;</i></a></li>
      <li class="menu"><a href="#"><i class="material-icons">&#xE30A;</i></a></li>
      <li class="menu"><a href="#"><i class="material-icons">&#xE896;</i></a></li>
      <li class="menu" style="float:right;"><a href="#"><i class="material-icons">&#xE0D0;</i></a></li>
     </ul>
  </div> 

Answer 1

您不能将 div 作为 ul 的直接子级。只需将菜单包裹在一个元素中，将 background-color 应用于该元素，这样颜色将成为窗口的宽度，然后将 .container 添加到您的 ul 使其以您的视口(viewport)宽度为中心，并添加 padding: 0 以删除 ul 上的默认左填充。

ul.menu {
  list-style-type: none;
  overflow: hidden;
  color: #798892;
  padding: 0;
}
.menuContainer {
  background-color: #1f3647;
}
.active {
  background-color: #101d26;
}
li.menu {
  float: left;
}
li.menu a {
  display: block;
  color: #798892;
  padding: 20px 20px;
  text-decoration: none;
}
li a:hover {
  background-color: #101d26;
}
.container {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  nboi
</div>
<div class="menuContainer">
  <ul class="menu container">
    <li class="menu"><a href="#"><i class="material-icons">&#xE88A;</i></a></li>
    <li class="menu"><a href="#"><i class="material-icons">&#xE30C;</i></a></li>
    <li class="menu"><a href="#"><i class="material-icons">&#xE30A;</i></a></li>
    <li class="menu"><a href="#"><i class="material-icons">&#xE896;</i></a></li>
    <li class="menu" style="float:right;"><a href="#"><i class="material-icons">&#xE0D0;</i></a></li>
  </ul>
</div>