Html ul子元素的组合宽度大于其总和

回答

我开始觉得我疯了。。。 目前，我正在尝试设置一个简单的顶部导航，该导航在标题中为margin-0-auto-ed。它包含五个子元素，每个元素的宽度为200px。如果我仍然能正确计算，宽度等于1000px。 但要容纳所有子元素，顶部的

-元素需要1016px的宽度。我只是不明白这是从哪里来的。CSS重置会删除所有边距、填充等。 代码如下：

HTML

    <div id="header-wrapper">
        <div id="header">
                <ul id="head-menu">
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                </ul>
        </div>
    </div>

<div id="header-wrapper">
    <div id="header">
        <ul id="head-menu">
            <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li>
        </ul>
    </div> </div>

更新29.09.13

如果有人想知道的话，我没有注释掉空白或使用一些负的左边距，而是使用了以下语法：

</li><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
</li><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>

---

这样做很容易，不会对代码进行太多修改，并且保持代码的整洁

display:inline block

在li之间插入空格（即显示HTML中显示的空白）。如果在li上添加背景色，您可以更清楚地看到这一点。

问题是

内联元素

由于html上的空白（即使是简单的换行符），请在彼此之间添加额外的空间

HTML

    <div id="header-wrapper">
        <div id="header">
                <ul id="head-menu">
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                </ul>
        </div>
    </div>

<div id="header-wrapper">
    <div id="header">
        <ul id="head-menu">
            <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li>
        </ul>
    </div> </div>

或者，如果您只想让html看起来整洁，您可以在显示中添加一个负边距：内联块元素（以在html代码中解释它们之间的间隙），但只有当您有一种固定的布局（很少更改）时，它才会起作用，你太固执了，不会通过删除空格或添加注释来搞乱你的代码

我没有足够的“声誉”来评论，但我想重申一下Vinícius Moraes说过的话，你代码中的空格就是

<div id="foo"></div>
<div id="bar"></div>
<div id="thing"></div>

如图所示，在不同的线条上放置（创建一个编码的空白）可以产生戏剧性的效果，其中放置

<div id="foo"></div><div id="bar"></div><div id="thing"></div>

---

我花了几个小时想知道为什么我的三个应用程序在jquery resize的完美定位下会出现下一个衬里，我发现它可以产生想要的效果。再次感谢Vinícius Moraes指出这一新手错误。

但是，如果不使用

display:inline block

，如何将元素显示为水平列表？或者有没有办法消除这种间隔？我以前从来没有遇到过这个问题…看看我的答案@MoritzFriedrich你可以编辑你的HTML来删除li之间的空格，一种可能性。如果不适合你，还有CSS选项。一个很酷的CSS选项是将UL的字体大小设置为0，然后将LIs的字体大小设置回正常大小。最好的方法是对空白区域进行注释，是干净的，不需要额外的CSD您认为使用

display:table cell

vs

display:inline block

会有问题吗？我知道

display:table cell

存在一些浏览器兼容性问题。在我的选项中，使用table cell而不是inline block的唯一问题是浏览器兼容性