CSS HTML顯示內聯
[英]CSS Html display inline
問題描述
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>
再次感謝任何幫助！！
3 個解決方案
解決方案1
1 已采納 2012-08-02 19:01:00
我相信在li內設置要顯示的標簽：block正在這樣做。 我建議從以下位置刪除display：block
ul#nav li a {
display: block;
height: 62px;
text-indent:-99999px
}
或者，您可以在該聲明中添加float：left，這就是我在其中看到您的代碼與您發布的鏈接中的代碼之間的區別的地方。
解決方案2
0 2012-08-02 19:02:42
更改為display: inline-black並添加white-space: nowrap; （nowrap防止行換行，但是根據您的操作，可能不需要此行）
解決方案3
0 2012-08-02 19:03:00
擺脫display: block; 在ul#nav li a
您可以在此處查看它的影響方式： http ： //jsfiddle.net/aWNbC/
HTML / CSS顯示：內聯問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.