Ul菜单不会在容器中留下浮动物

Question

<ul>标题不是从容器max-width开始的。我添加了文字以显示容器的位置，为什么菜单也没有从那里开始？

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

  

注意：不允许将block元素放在inline元素中作为子元素。

但其他错误：

1）您将.container限制为750px。将其删除：

.container {
  max-width:750px;<------------Remove
  margin-left:auto;
  margin-right:auto;
}

2）将padding:0插入ul.menu：

ul.menu {
 padding:0;
 //more code...
}

Demo

Answer 2

您不能将div作为ul的直接子女。只需将菜单包装在元素中，将background-color应用于该元素，使颜色为窗口宽度，然后将.container添加到ul，使其居中于视口宽度，并添加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>