2

<ul>with要素を使用してナビゲーションバーを作成しようとしていますinlineが、要素間にギャップがあり、どこからともなく発生しているように見えます。つまり、リンクにカーソルを合わせると、影付きのボックスが周囲のボックスにスナップするはずです。現在、ページは次のようになっています：http ://wictorht.at.ifi.uio.no/ 。これらのギャップの原因は何ですか？

HTML：

<body>
    <div id="main">
        <ul class="header">
            <li class="title">wictorht</li>
            <li class="header">
            <a class="header" href="https://bitbucket.org/htor/dwmst/src">dwms</a>
            </li>
            <li class="header">
            <a class="header" href="https://bitbucket.org/htor/linux/src">linux</a>
            </li>
            <li class="header">
            <a class="header" href="http://www.fsf.org/register_form?referrer=10397">fsf</a>
            </li>
            <li class="header">
            <a class="header" href="http://stackexchange.com/users/1006063">stackexhange</a>
            </li>
        </ul>
    </div>
</body>

CSS：

body {
    background: #666666;
    color: #c0c0c0;
    margin: 0;
}

a.header {
    text-decoration: none;
    padding: 10px;
    margin: 0;
}

a.header:hover, a.header:active {
    background-color: #666666;
    color: #c0c0c0;
}

ul.header {
    background-color: #c1c1c1;
    color: #666666;
    list-style: none;
    padding: 10px 10px 10px 0;
    margin: 0 0 10px 0;
}

li.header {
    display: inline;
}

li.title {
    background-color: #000000;
    color: #bada55;
    display: inline;
    padding: 10px;
}
4

3 に答える 3

5

これは、要素間のすべての空白 (改行を含む) が、クライアントのブラウザーによってレンダリングされるときに 1 つのスペースに折りたたまれるためです。スペースを非表示にするには、次のいずれかを実行できます。

  1. li要素間のスペースを削除します。

    <li><!-- content --></li><li><!-- more content --></li>

  2. font-size親のulをに設定し、要素0の を再定義します。font-sizeli

    ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
}

  3. li要素間のギャップをコメント アウトします。

    <li>Content</li><!--
--><li>Next li</li>

  4. liを使用する代わりに要素をフロートしますdisplay: inline。これにより、通常のフローから要素が取り除かれ、スペースが削除されます。

    ul {
    overflow: hidden; /* to keep the li 'visibily' within the bounds of the ul */
}

ul li {
    float: left;
}

  5. li次の開始タグの前に、次の行でタグを閉じます。liこれは少し間違っているように感じますが、有効です。

    <li>First li</li
><li>Second li</li>

(または、明らかに、次の li開始タグを前の行の前の要素の終了タグの直後に配置します。

    <li>First li</li><
    li>Second li</li>

)

于 2012-08-28T22:11:06.200 に答える
2

ギャップは、<li></li>タグ間の空白が原因です。<li>...</li><li>...</li>比べてみてください。

とにかく、これを避けてdisplay:block使用するfloat:left

于 2012-08-28T22:10:53.527 に答える
0

これは、何が起こっているのか、および以前の回答で既に言及されている回避策を説明する素晴らしい投稿です。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

また、css セレクター名にも少し問題があります。実際に必要なクラスは 1 つだけで、CSS の性質を利用して残りの作業を行うことができます。

.header {
   background-color: #c1c1c1;
   color: #666666;
   list-style: none;
   padding: 10px 10px 10px 0;
   margin: 0 0 10px 0;
}

.header クラスの子であるすべての「li」タグをターゲットにします。

.header li {
   display: inline;
 }

.header クラスの子であるすべての「a」タグをターゲットにします (これらはたまたま「li」タグ内にあります)。

 .header a {
   /* etc */
 }
于 2012-08-28T22:41:36.100 に答える