Question

我一直在四处寻找帖子，看到很多类似于我的讨论，但不幸的是没有确切的答案。那么让我来描述一下这个案例并问你为什么会发生这种情况，这就是造成这种奇怪行为的原因。

所以，我有一个非常简单的HTML页面，其中有一个父容器和一个无序项目列表ul，它被设置为宽度：100％，由4个li项目组成，每个项目的宽度设置为：25％;我肯定会将每个可能的布局属性重置为零，但尽管如此，在一天结束时，四个列表元素的总宽度超过100％。是什么原因导致浏览器渲染4 * 25％！= 100％尽管我做了所有的重置???

这是代码，并提前感谢您的答案。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8" />  
<title>Test</title>  
</head>  
<body style="margin: 0; padding: 0; border: 0;">  
<div id="wrapper">  
  <header style="width: 960px;">  
      <nav>  
      <ul style="width: 100%; padding: 0 !important; margin: 0 !important; background-color: yellow; ">  
         <li style="width: 25%; border: 0 !important; background-color: #f00; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#" id="active">Dashboard</a></li>  
         <li style="width: 25%; border: 0 !important; background-color: #0f0; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">Mobiel</a></li>  
         <li style="width: 25%; border: 0 !important; background-color: #00f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">3</a></li>   
         <li style="width: 25%; border: 0 !important; background-color: #f0f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">4</a></li>  
      </ul>  
    </nav>   
  </header>  
</div>      

</body>  
</html>

Answer 1

我认为问题在于您设置了display: inline-block属性，因此<li>元素被视为内联元素，每行之间的换行符引入了空格，浏览器将其作为空格之间的空格。词语”。

更改HTML以将结束>放在下一行，即

<ul style="width: 100%; padding: 0 !important; margin: 0 !important; background-color: yellow; ">  
    <li style="width: 25%; border: 0 !important; background-color: #f00; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#" id="active">Dashboard</a></li  
    ><li style="width: 25%; border: 0 !important; background-color: #0f0; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">Mobiel</a></li 
    ><li style="width: 25%; border: 0 !important; background-color: #00f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">3</a></li   
    ><li style="width: 25%; border: 0 !important; background-color: #f0f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">4</a></li>  
</ul>

这解决了我在Firefox上的问题。

Answer 2

LI 中的float:left将解决问题

li { float:left; }

这应该处理创建的空白区域。

示例

http://jsfiddle.net/G3Jxv/

Answer 3

您还可以在＆lt; ul＆gt;上将font-size和/或line-height设置为0。然后在孩子上重置它＆lt; li＆gt;元素，因为内联元素之间会自动添加一个空格。

但其他解决方案也有效

Answer 4

您可以使用float:left元素上的li尝试浮动元素。或者，应避免在li声明之间使用空格：

<li><a>Test</a>
</li><li>
  ...
</li><li>

看看这个Fiddle

Answer 5

您还可以使用CSS

删除li元素之间的空格

ul {word-spacing: -1em;
    font-size: 0;
    line-height: 0;
    letter-spacing: -1px;}

li {display: inline-block;
    font: normal 13px/1.3 "Trebuchet MS", Helvetica, sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;}

Answer 6

这只是因为，在＆＃39; li＆＃39;之间进入了。

尝试删除所有＆＃39;在＆＃39;之间输入，如下所示：

<ul>
  <li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

示例：

https://codepen.io/baofengyv/pen/XRgJoW

CSS问题 - 为什么4 * 25％不是100％

6 个答案: