5

この問題があります。サイトを検索したところ、他の人も同様の問題を抱えていましたが、どの回答も機能していないようでした. それらには、line-height を 0px に設定することが含まれていました。すべてのマージン/パディングを 0px に設定します。Google Chrome の Inspect Element マテリアルを使用してマージン/パディングをチェックします。「a」要素と「li」要素にカーソルを合わせて、不要なパディングやマージンがあるかどうかを確認しましたが、ありませんでした。

奇妙だったのは、各リンクの間に、ドキュメント全体のどの要素にも占有されていない小さな空白があったことです。

今は文字間に枠がないので認識できませんが、Link4の「a」の周りのスペースはLink1のテキストの周りのスペースよりも小さくなっています。最初の "li" 要素の幅は、4 番目の "li" コンテナーよりも奇妙に 4px 広く、少し余白があります。空白を取り除きたいのですが、アイデアはありますか?

コードは次のとおりです。

CSS:

html {
    overflow-y: scroll;
}
body {
    background-color: #ffdeff;
    overflow: hidden;
}
#wrapper {
    width: 1000px;
    height: 0px;
    overflow: hidden;
    margin: auto;
    background-color: white;
    border-left: 1px solid rgb(210, 210, 210);
}
#header {
    width: 1000px;
    height: 0px;
    overflow: hidden;
    margin: auto;
}
#header-toolbar {
    width: 1000px;
    list-style-type: none;
    border-radius: 3px;
    position: absolute;
}
#nav-position {
    position: absolute;
    float: left;
    padding: 0px;
    margin: 0px;
}
.nav-link-container {
    background-color: #FF66CC;
    display: inline;
    padding: 0px;
    text-align: center;
}
.nav-link {
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 0px;
    display: table;
    display: inline;
    margin: 0 auto;
}

HTML ドキュメント:

    <body>
        <script src="jquery-1.9.1.js"></script>
        <script>
        </script>
        <div id="wrapper">
            <div id="header">
                <div id="header-toolbar">
                    <ul id="nav-position">
                        <li class="nav-link-container">
                            <a class="nav-link">Link1</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link2</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link3</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link4</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="main"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

なんでも助かります！どうもありがとうございました！

4

1 に答える 1

3

<li>改行するときはスペースがあります。したがって、1つの解決策は、次のようにすべてを同じ行に追加することです: http://jsfiddle.net/6tzxj/1/

于 2013-05-11T06:36:01.413 に答える