0

私の脳は機能していません。どうか、1分間私の仕事をさせてください。

コードは非常に単純です。

<ul id="nav">
            <li><a href="">Plumbing</a></li>
            <li><a href="">Flooring</a></li>
            <li><a href="">Kitchen</a></li>
            <li><a href="">Bathroom</a></li>
            <li><a href="">Re-decoration</a></li>
            <li><a href="">Structural works</a></li>
            <li><a href="">Electrical</a></li>
            <li><a href="">Re-planning</a></li>
</ul>

そしていくつかのCSSスタイリング：

#nav {margin:auto;width:960px;height:29px;background: url(../images/navbg_03.gif);box-shadow: 0px 10px  30px #cccccc;}
#nav li {position:relative;display:block;float:left;}

とても単純ですが、なぜそれをフロートさせると、要素の開始前にギャップが残るのか、頭がおかしくなります。

4

3 に答える 3

2

ul通常、ユーザー エージェント スタイルにはパディングまたはマージンがあり、追加するだけです。

#nav{
    padding:0;
    margin:0;
}
于 2012-06-19T02:22:05.003 に答える
2

私がいつも頼りにしている松葉杖は、すべてに境界線を投げることです。これを行うと、パディングが押し付けられていることがわかります: http://jsfiddle.net/gQMvT/5

* { border: 1px solid black; }
于 2012-06-19T02:24:43.753 に答える
0

マージンは0pxにする必要があり、cssコードのパディングは次のようになります

#nav {margin:0px;width:960px;height:29px;background: url(../images/navbg_03.gif);box-shadow: 0px 10px  30px #cccccc;}
#nav li {position:relative;display:block;float:left;}
于 2012-06-19T12:09:30.760 に答える