0

5 つのリンクがすべて隣り合っており、幅が 20% に設定されていますが、最後のリンクは次の行に移動します。しかし、19.5%に設定すると大丈夫です。本文、リンク、および含まれるすべての要素のパディングとマージンを 0 に設定したことを確認しました。大きな問題ではありませんが、これに関する情報をいただければ幸いです。

html は次のとおりです。

<div id="top">
    <img src="someimage" />
    <nav id="nav">
        <a href="link1.html">LINK1</a>
        <a href="link2.html">LINK2</a>
        <a href="link3.html">LINK3</a>
        <a href="link4.html">LINK4</a>
        <a href="link5.html">LINK5</a>
    </nav>
</div>

そしてCSS：

body {
    background-color: white;
    margin: 0;
    padding: 0;
}
#top {
    background-color: #AAAAAA;
    height: 50px;
}
#nav > a {
    display:inline-block;
    height: 25px;
    width: 19.5%;
    background-color: #AAAAAA;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #222222;
}

答えてくれてありがとう。タグの間にコメントを入れると、うまくいきます。

4

3 に答える 3

2

inline-block改行をスペースに変換するという問題があり、レイアウトが壊れる可能性があります。代わりにフロートを使用することをお勧めします。

#nav{
    overflow:hidden;
}

#nav > a {
    float: left;
    height: 25px;
    width: 19.5%;
    background-color: #AAAAAA;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #222222;
}
于 2013-08-07T13:15:51.367 に答える
2

タグ間の空白です。対策についてはこちらの記事を参考にしてください。

私の提案は、HTML をすべて 1 行にまとめることです。読みにくいですが、必要なものをレンダリングします。

ただし、最善の方法は、HTML を縮小してすべてを自動的に削除するビルド ステップを用意することです。

于 2013-08-07T13:09:12.213 に答える
1

各リンク間の改行はスペースに変換されます。これが追加される幅です。

次のように、すべての<a>タグを 1 行に記述したり、フロートにしたり、タグの間にコメントを追加したりできます。

<nav id="nav">
    <a href="link1.html">LINK1</a><!--
    --><a href="link2.html">LINK2</a><!--
    --><a href="link3.html">LINK3</a><!--
    --><a href="link4.html">LINK4</a><!--
    --><a href="link5.html">LINK5</a>
</nav>
于 2013-08-07T13:10:31.247 に答える