2

回答済み

私は頭がおかしくなっていると思い始めています...現在、ヘッダーでマージン0自動化されたシンプルなトップナビゲーションを設定しようとしています。<li>それぞれ幅が 200px の子要素が 5 つ含まれています。それでも正しく計算できれば、幅は 1000px になります。ただし、すべての子を保持するには、 top<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>

これにより、コードをあまり変更せずに簡単に実行でき、クリーンな状態を維持できます。

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

コメントするには十分な「評判」がありませんが、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のサイズ変更で完全に配置されたときに、なぜ my three が次の裏地にあるのかと数時間を費やした後にわかったように、目的の効果を生み出すことができます。この初歩的な間違いを指摘してくれた Vinícius Moraes に再度感謝します。

于 2015-08-12T18:35:59.963 に答える