Question

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

我正在尝试将菜单图像显示在彼此旁边，但目前它们仍然显示在彼此之下。

这是它的css，我知道有些没有被使用但我现在正试图按照教程：http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/

我在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>

再次感谢您的帮助!!

Answer 1

我相信在li中设置一个标签来显示：block正在这样做。我建议删除display：block from：

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

}

或者，您可以将float：left添加到该声明中 - 这就是我看到您与您发布的链接中的代码之间的区别。

Answer 2

更改为display: inline-black并添加white-space: nowrap;（nowrap可防止换行，但根据您的操作情况，您可能不需要此行）

Answer 3

摆脱display: block;

中的ul#nav li a

您可以在此处查看它对它的影响：http://jsfiddle.net/aWNbC/

CSS Html显示内联

3 个答案: