0

CSS に小さな問題があり、この Web サイトで初めて、誰かが私を助けてくれるかどうか疑問に思っています :),

メニュー画像を並べて表示しようとしていますが、現時点ではまだ下に表示されています。

これはそのCSSです。使用されていないものがあることは知っていますが、現時点ではこのチュートリアルに従おうとしています: http://css-tricks.com/video-screencasts/13-converting-a-photoshop-モックアップ-パート2-エピソード-2/

私は14分23秒です..

これは私のcssです

 * { margin: 0; padding: 0; }
 html { overflow-y: scroll; }
 body { font: 62.5% "Helvetica", sans-serif;
 background: url(body-bg.jpg) top left repeat;}

ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a { outline: none; }
a img { border: none; }
/* END RESET */


/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */
#page-wrap {
width: 654px;
margin: 0 auto;
}

ul#nav {

}
ul#nav li{
    display: inline;
    }
    ul#nav li a {
        display: block;
        height: 62px;
        text-indent:-99999px

}
ul#nav li.articles a {
    width: 200px;
    background:url(nav-articles.jpg)bottom center no-repeat;
    }

ul#nav li.downloads a {
    width:287px;
    background:url(nav-downloads.jpg)bottom center no-repeat;
}
ul#nav li.videos a {
    width:167px;
    background:url(nav-videos.jpg)bottom center no-repeat;
}

/* END STRUCTURE */

これは私のHTMLです

<body>


<div id="page-wrap">


<img src="header.jpg" alt="mockup header" />


    <ul id="nav">
        <li class="articles"><a href="#">Articles</a></li>
        <li class="videos"><a href="#">Videos</a></li>
        <li class="downloads"><a href="#">Downloads</a></li>
    </ul>

<p>Main Content</p> 


<div id="sidebar">
</div>    

</div>

<div id=footer">
</div>


</body>

助けてくれてありがとう！

4

3 に答える 3

1

li 内に a タグを設定して display: ブロックを実行していると思います。次から display:block を削除することをお勧めします。

ul#nav li a {
        display: block;
        height: 62px;
        text-indent:-99999px

}

または、その宣言に float:left を追加することもできます。ここで、投稿したリンクのコードとあなたのコードの違いがわかります。

于 2012-08-02T19:01:00.580 に答える
0

に変更しdisplay: inline-blackて追加しwhite-space: nowrap;ます（nowrapは行が折り返されるのを防ぎますが、実行していることによってはこれが必要ない場合があります）

于 2012-08-02T19:02:42.480 に答える
0

display: block;で取り除くul#nav li a

ここでそれがどのように影響するかを見ることができます：http：//jsfiddle.net/aWNbC/

于 2012-08-02T19:03:00.980 に答える