2

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

因此，我有一个非常简单的 HTML 页面，其中包含一个父容器和一个无序项列表 ul 设置为 width: 100% 并由 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>
4

6 回答 6

6

我认为问题在于您设置了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 上的问题。

于 2012-12-14T13:54:43.663 回答
5

放置float:left在LI将解决问题

li { float:left; }​

这应该注意创建的空白。

例子

http://jsfiddle.net/G3Jxv/

于 2012-12-14T13:52:05.880 回答
1

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

但其他解决方案也有效

于 2013-02-18T18:41:46.233 回答
0

您还可以使用 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;}
于 2012-12-14T14:01:40.857 回答
0

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

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

看看这个小提琴

于 2012-12-14T13:57:07.050 回答
0

只是因为'li'之间有'enter'。

尝试删除 'li' 之间的所有 'enter'，如下所示：

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

例子：

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

于 2017-05-02T02:14:17.113 回答