0

对 css 有一个小问题，这个网站上的新问题，想知道是否有人可以帮助我 :)，

我正在尝试让菜单图像彼此相邻显示，但目前它们仍显示在彼此下方。

这是它的 css，我知道有些没有被使用，但我目前正在尝试遵循一个教程：http ://css-tricks.com/video-screencasts/13-converting-a-photoshop-样机第二部分第二集/

我在 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: block 正在这样做。我建议从以下位置删除 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 回答