Question

当我注意到<li>和<ul>之间存在这种差距时，我正在构建一个菜单。即使将边距和填充设置为0也无法解决问题，我不知道它来自何处。

我在下面的示例中找出了问题。

呈现的代码：http://gyazo.com/a8051a862c08c4dce4ce0b44ab4b271b

代码：

<!DOCTYPE html>
<html>

<head>
   <style>
      div#container{
         display: inline-block;
         border: 5px solid #00ff00;
      } 

      ul{
         list-style: none;
         margin: 0px;
         padding: 0px;
         border: 5px solid #0000ff;

      }

      li{
         display: inline-block;
         border: 5px solid #ff0000;
         width: 30px;
         height: 30px;
         margin: 0px;
         padding: 0px;
      }
   </style>
</head>

<body>

<div id="container">
   <ul >
      <li></li><li></li>
   </ul>
</div>

</body>
</html>

有趣的是，如果我在<li>元素内写任何内容，则差距会消失。有人可以向我解释发生了什么以及如何消除这种差距吗？

Answer 1

nathan建议的是一个解决方案，这里是另一个解决方案，不使用inline-block显示格式，因为它可能会在<ul>没有内容的情况下（例如在您的情况下）创建问题.....此演示使用floats并且没有内容

DEMO

<强> CSS

  li{
      display: block;
      border: 5px solid #CCC;
      width: 30px;
      height: 30px;
      margin: 0px;
      padding: 0px;
      float:left; //added this
     }
.clearfix   {clear:both;}

<强> HTML

<div id="container">
   <ul ><li></li><li></li>
    <div class="clearfix"   ></div>
   </ul>
</div>

Answer 2

我想为之前回答的答案添加另一个答案，这与已经回答的答案完全不同。

如果您使用vertical-align显示，则需要使用inline-block属性。

对于实例，

CSS更改：

 div#container{
         display: inline-block;
         border: 5px solid #00ff00;
         vertical-align:top;
      } 


      li{
         display: inline-block;
         border: 5px solid #ff0000;
         width: 30px;
         height: 30px;
         margin: 0px;
         padding: 0px;
         vertical-align:top;
      }

<强> WORKING DEMO

希望这有帮助。

Answer 3

您需要添加 来解决问题。

对于实例，

<div id="container">
   <ul >
      <li>&nbsp;</li>
      <li>&nbsp;</li>
   </ul>
</div>

<强> WORKING DEMO

<强> READ MORE FOR  

希望这有帮助。

Answer 4

这不是“错误”（我不认为）。这只是在一条线上设置元素的方式。您希望键入的单词之间的空格是空格吗？空间这些块之间就像单词之间的空格。那不是说 spec无法更新，以表示内联块元素之间的空格应该什么都不是，但我相当肯定这是一个巨大的蠕虫，不可能永远发生。

我使用负边距，它适用于我：

li {
    display: inline-block;
    margin-right: -4px;
}

<li>和<ul>元素之间的神秘填充/边距</ul> </li>

4 个答案: