CSS HTML显示内联
[英]CSS Html display inline
问题描述
Having a small problem with css, new on this website and wondering if someone could help me :), 
CSS有一个小问题，这个网站有新问题，想知道是否有人可以帮助我:)，
I am trying to get the menu images to show next to eachother, but at the moment they are still being displayed below eachother. 我正在尝试使菜单图像彼此相邻显示，但此刻它们仍在彼此下方显示。
this is the css for it, I know some is not being used but I am trying to follow a tutorial at the moment this one: http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/ 这是它的css，我知道其中一些没有被使用，但是我正在尝试遵循这一教程： http : //css-tricks.com/video-screencasts/13-converting-a-photoshop-样机零件两集二/
I am on 14 minutes 23 seconds.. 我14分钟23秒。
this is my css 这是我的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 */
this is my html 这是我的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>
Thanks again for any help!! 再次感谢任何帮助！！
3 个解决方案
解决方案1
1 已采纳 2012-08-02 19:01:00
I believe setting the a tag within the li to display: block is doing it. 我相信在li内设置要显示的标签：block正在这样做。 I'd suggest removing display:block from: 我建议从以下位置删除display：block
ul#nav li a {
display: block;
height: 62px;
text-indent:-99999px
}
Or, you could add float:left to that declaration - that's where I see the difference between yours and the code in the link you posted. 或者，您可以在该声明中添加float：left，这就是我在其中看到您的代码与您发布的链接中的代码之间的区别的地方。
解决方案2
0 2012-08-02 19:02:42
Change to display: inline-black and add white-space: nowrap; 更改为display: inline-black并添加white-space: nowrap; (nowrap prevents the line from wrapping, but you may not need this depending on what you're doing) （nowrap防止行换行，但是根据您的操作，可能不需要此行）
解决方案3
0 2012-08-02 19:03:00
Get rid of display: block; 摆脱display: block; in ul#nav li a 在ul#nav li a
You can see how it affects it here: http://jsfiddle.net/aWNbC/ 您可以在此处查看它的影响方式： http ： //jsfiddle.net/aWNbC/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.