CSS HTML顯示內嵌

有一個小問題，CSS，該網站新的想知道，如果有人可以幫助我:)，CSS HTML顯示內嵌

我試圖讓菜單圖像旁邊的海誓山盟顯示，但此刻他們仍然在彼此之下展示。

這是它的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>

ŧ再次爲任何幫助！

來源

2012-08-02 user1572303

你玩過Firebug，谷歌/ IE開發工具嗎？按F12，您可以即時編輯您嘗試修復的元素的CSS，然後查看哪些規則會獲得所需的效果。 – darethas 2012-08-02 18:56:08

謝謝我已經下載了螢火蟲，並開始玩它:) – user1572303 2012-08-02 19:05:54

我相信在li中設置一個標籤來顯示：block就是這樣做的。我建議刪除顯示：街區：

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

}

或者，您可以添加浮動：左到聲明 - 這就是我看到你和你發佈的鏈接代碼之間的差異。

來源

2012-08-02 19:01:00 Zeth

浮動左側做到了，雖然採取顯示：阻止走是我以前的想法和嘗試，但它停止顯示圖像，但它是否把它內聯任何洞察呢？非常感謝！ – user1572303 2012-08-02 19:05:34

更改爲display: inline-black，並添加white-space: nowrap;（NOWRAP防止包裝線，但你可能不需要這個取決於你在做什麼）

來源

2012-08-02 19:02:42

在ul#nav li a

擺脫display: block;你可以看看它影響到這裏：http://jsfiddle.net/aWNbC/

來源

2012-08-02 19:03:00 patsweet

不幸的是，拿走了圖像，雖然確實把他們內聯..任何洞察力爲什麼？我加了float：left;而且做了這項工作，但我仍然想知道爲什麼要這樣做 – user1572303 2012-08-02 19:06:19

CSS HTML顯示內嵌

回答

相關問題