Question

回答

我开始认为我正在失去理智...... 目前我正在尝试设置一个简单的顶部导航，它在标题中是margin-0-auto-ed。它包含五个子<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中显示的空格）。如果你在背景上添加背景颜色，你可以更清楚地看到这一点。

Answer 3

或者如果你只是希望你的html看起来很整洁，你可以在显示中添加一个负边距：内联块元素（以解释它们在html代码中的间隙），但只有你有有点固定的布局，很少改变，你太坚决不通过删除空格或添加注释来搞乱你的代码

Answer 4

我没有足够的“声誉”来发表评论，但我想重申一下ViníciusMoraes说的话，你的代码中的白色空间即...

<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调整大小完美定位时发现的效果。再次感谢ViníciusMoraes指出这个新手的错误。

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

4 个答案: