0

どういうわけか、divの内側の左側にスペースがあります

ここに私が見ているものの写真がありますhttp://tinypic.com/r/msc2h/7

CSS

 div {margin:auto;}

    li{padding: 0px; margin: 0px; display: inline; float:left;}

    ul{height: 20px; text-align: left; vertical-align: center; margin: auto;}

HTML

<div style="border: 1px solid white; width: 500px;">
    <ul>
    <li>Home&nbsp;</li>
    <li>Product&nbsp;&nbsp;</li>
    <li>Links&nbsp;&nbsp;</li>
    <li>Contact Us&nbsp;&nbsp;</li>
    <li>Abuot Us</li>
    </ul>
</div>
4

3 に答える 3

2

UL のパディング/マージンも 0 に設定する必要があります。Ulにはそれ自体でパディングがあります。

于 2011-03-13T04:34:18.493 に答える
1

からでdivはなく、オーバーライドしない場合にブラウザーが設定するパディング/マージンからです。これを試して：

    div {
        margin: auto;
        border: 1px solid white;
        width: 500px;
    }

    li {
        padding: 0;
        margin: 0 5px;
        display: inline;
        float: left;
    }

    ul {
        height: 20px;
        text-align: left;
        vertical-align: center;
        padding: 0;
        margin: 0;
    }

リスト項目の間にスペースを追加するために使用していたことに気付きました。これは&nbsp;単に面倒で冗長なので、margin: 0 5px;リスト項目ごとに追加しました。

したがって、これらすべてを消去し&nbsp;、border および width プロパティを CSS に移動します。

    <div>
        <ul>
        <li>Home</li>
        <li>Product</li>
        <li>Links</li>
        <li>Contact Us</li>
        <li>About US</li>
        </ul>
    </div>

構造 (HTML) とプレゼンテーション (CSS) を分離することがなぜ優れた方法なのかについては、Google の次の素晴らしいビデオをご覧ください: HTML、CSS、Javascript の基礎から.

于 2011-03-13T04:45:20.530 に答える
0

それは、ul の margin:auto である可能性があり、これは基本的に ul を div の中央に配置します。この種のリストでは、予期しない動作が発生する可能性があります。

Firebug や Chrome に組み込まれている「要素の検査」ツールなどの開発者ツールを使用して詳しく調べていますか? 個々の要素がそれぞれ強調表示され、マージン/パディング/すべてに使用されている値が正確に示されます。この種の問題解決を本当にスピードアップできます。何が起こっているかを確認するもう 1 つの簡単な方法は、すべてに異なる色の 1 ピクセルの境界線を与えることです。そうすれば、問題が ul の内側にあるのか外側にあるのか、あるいは何らかの理由で li の 1 つにあるのかをよりよく知ることができます。

于 2011-03-13T04:58:33.307 に答える