ul 的子元素的组合宽度大于它们的总和

Question

>已回答

我

开始觉得我正在失去理智...目前，我正在尝试设置一个简单的顶部导航，该导航在标题中自动进行边距0。它包含五个子元素<li>每个元素的宽度为 200px。如果我仍然可以正确计算，则等于宽度为1000px。但是要容纳所有子元素，顶部<ul> -元素需要 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

问题是inline elements因为 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>

Answer 2

display:inline-block在 li 之间插入空格（即显示 HTML 中显示的空格）。 如果你在 li 上放一个背景色，你可以更清楚地看到这一点。

Answer 3

或者，

如果你只是想让你的HTML看起来整洁，你可以为display：inline-block元素添加一个负边距（以解释HTML代码中它们之间的间隙），但它只有在你有一个固定的布局时才有效，它很少改变，并且你太固执地通过删除空格或添加注释来弄乱你的代码

Answer 4

我没有足够的"声誉"来评论，但我想重申维尼修斯·莫赖斯说过的话，你的代码中有空格，即......

<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 调整大小完美定位时下一个衬里的位置后发现的那样。再次感谢维尼修斯·莫赖斯指出这个菜鸟错误。