2

Answered

I begin to think I am losing my mind... Currently I'm trying to set up a simple top navigation which is margin-0-auto-ed in the header. It contains five children <li>-elements with each a width of 200px. If I can still calculate correctly, that equals 1000px in width. But to hold all children the top <ul>-element requires 1016px width. I just don't get where this comes from. All margins, paddings etc. are removed by a CSS Reset. Code is as follows:

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 }

Update 29.09.13

If anyone wonders, instead of commenting out the white spaces or going for some negative left-margins, I just used this syntax:

</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>

That has done it easily, without altering the code too much and keeps it clean.

4

4 回答 4

2

问题是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>
于 2013-09-25T18:55:32.633 回答
0

或者如果你只是想让你的 html 看起来整洁，你可以给 display:inline-block 元素添加一个负边距（以考虑它们在 html 代码中的差距），但它只有在你有一个有点固定的情况下才有效布局，它很少改变，你太固执地通过删除空格或添加注释来搞乱你的代码

于 2013-09-25T19:58:14.723 回答
0

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

于 2013-09-25T18:53:40.263 回答
0

我没有足够的“声誉”来发表评论，但我想重申一下 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 指出这个新手错误。

于 2015-08-12T18:35:59.963 回答