Question

我想制作一个带有无序列表的菜单栏。我的问题是，当我将float放在.left类上，并将float放在.right类上时，我之前放在'ul'上的背景消失了。我怎样才能解决这个问题？？还有其他方法可以使浮动类保持背景吗？

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: red;
}
li.left{
  float: left;
  padding: 5px;
}
li.right{
  float: right;
  padding: 5px;
}

 <nav>
       <ul>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="right"><a href="#">menu</a></li>
         <li class="right"><a href="#">menu</a></li>
       </ul>
      </nav>

Answer 1

您可以为ul标签设置高度height: 200px;，因为您的ul标签的值为height 0。

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: red;
  height: 200px;
}
li.left{
  float: left;
  padding: 5px;
}
li.right{
  float: right;
  padding: 5px;
}

<nav>
       <ul>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="left"><a href="#">menu</a></li>
         <li class="right"><a href="#">menu</a></li>
         <li class="right"><a href="#">menu</a></li>
       </ul>
      </nav>

创建菜单栏

1 个答案: