我一直在浏览所有帖子，看到很多与我类似的讨论，但不幸的是没有确切的答案。所以让我描述一下这个案例，问你为什么会这样，这种奇怪行为的原因是什么。
因此，我有一个非常简单的 HTML 页面，其中包含一个父容器和一个设置为 width: 100% 的无序元素 ul 列表，由 4 个 li 元素组成，每个元素都设置为 width: 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>
最佳答案
我认为问题在于您设置了 display: inline-block属性(property)，所以<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 上的问题。
关于html - CSS 问题 - 为什么 4 * 25% 不是 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13879927/