时间戳

首页 > 解决方案 > 创建菜单栏

html - 创建菜单栏

问题描述

我想制作一个带有无序列表的菜单栏。我的问题是，当我在 .left 类上向左浮动并在 .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>

标签： htmlcss

解决方案

您可以为 ul 标签设置一些高度height: 200px;，因为您的ul标签有height0。

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>

推荐阅读