html - ul 的子元素的组合宽度等于它们的总和

Question

已回答

我开始觉得我疯了...... 目前我正在尝试设置一个简单的顶部导航，它在标题中是 margin-0-auto-ed 。它包含五个 child <li> - 每个宽度为 200px 的元素。如果我仍然可以正确计算，则宽度等于 1000px。 但要把所有的 child 都顶起来<ul> -element 需要 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>

CSS

#header-wrapper         { width: 100%; height: 56px; position: relative }
#header                 { width: 100%; height: 56px; background: #111; position: absolute; }
#head-menu              { width: calc(5*200px); margin: 0 auto;}
.head-menu-item         { display: inline-block }
.head-menu-item-link    { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }

更新 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>

这很容易做到，无需过多更改代码并保持代码整洁。

Answer 1

问题是 内联元素 由于您的 html 上的空白空间(即使是简单的换行符)而在彼此之间添加了额外的空间，这是您的解决方法 jsfiddle

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>