左浮动列表项间存在空白问题求助（附代码示例）

嘿，刚入门前端很正常，别担心～我看了你的代码，你遇到的列表项之间的空白问题，其实是两个常见的小坑导致的，咱们一步步解决：

问题原因分析 #

1. 边框叠加造成的视觉空白
   你给所有ul li都加了border: 1px solid white，相邻的列表项边框会叠加在一起（比如主菜单里Menu1的右边框和Menu2的左边框，会变成2px的白色间隙），看起来就像是空白。

2. HTML空白字符（实用补充知识点）
   虽然你用了float: left，这个问题不会在当前主菜单出现，但如果以后用inline-block做菜单，HTML里<li>标签之间的换行、空格会被浏览器解析为空白字符，也会产生间隙——这个知识点记下来，以后肯定用得到。

针对性解决方案 #

方案1：修复边框叠加问题（最直接解决你的当前问题）

修改你的CSS，把统一的边框改成只给列表项加单侧边框，避免叠加：

* { margin: 0; padding: 0; }
ul { list-style: none; }
/* 主菜单li：只加右边框 */
ul > li {
  background-color: black;
  border-right: 1px solid white;
  width: 110px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: left;
}
/* 主菜单最后一个li去掉右边框 */
ul > li:last-child {
  border-right: none;
}
ul li a { color: white; text-decoration: none; }
ul li a:hover { background-color: red; display: block; }
ul li ul li { 
  display: none;
  /* 下拉菜单li：只加上边框，去掉右侧边框 */
  border-top: 1px solid white;
  border-right: none;
}
/* 下拉菜单第一个li去掉上边框 */
ul li ul li:first-child {
  border-top: none;
}
ul li:hover ul li { display: block; }

方案2：用负margin抵消边框叠加

如果不想改边框的写法，也可以给列表项加负margin，让边框重叠：

* { margin: 0; padding: 0; }
ul { list-style: none; }
ul li {
  background-color: black;
  border: 1px solid white;
  width: 110px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: left;
  /* 负margin抵消左侧边框 */
  margin-left: -1px;
}
/* 主菜单第一个li去掉负margin，避免往左偏移 */
ul > li:first-child {
  margin-left: 0;
}
ul li a { color: white; text-decoration: none; }
ul li a:hover { background-color: red; display: block; }
ul li ul li { 
  display: none;
  /* 下拉菜单调整垂直方向的负margin */
  margin-left: 0;
  margin-top: -1px;
}
/* 下拉菜单第一个li去掉垂直方向的负margin */
ul li ul li:first-child {
  margin-top: 0;
}
ul li:hover ul li { display: block; }

通用解决HTML空白字符的方案（备用）

如果以后用inline-block布局菜单，遇到空白间隙，可以用这几种方法：

• 把HTML里的<li>标签连在一起，去掉换行和空格：

  <link rel="stylesheet" type="text/css" href="style.css">
  <ul>
    <li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a>
      <ul>
        <li><a href="#">submenu 1</a></li><li><a href="#">submenu 2</a></li><li><a href="#">submenu 3</a></li>
      </ul>
    </li>
  </ul>
  

• 给父级ul设置font-size: 0，然后给li恢复正常字体大小：

  ul {
    font-size: 0;
  }
  ul li {
    font-size: 16px; /* 改成你需要的字体大小 */
  }
  

另外提个小建议：你的下拉菜单现在会把下面的内容撑开，最好给父级li设置position: relative，然后给子ul设置position: absolute，这样下拉菜单不会影响页面布局，体验更好～

内容的提问来源于stack exchange，提问作者setsuna kazama