我有一個風格和索引。我想在同一行顯示徽標和文字，但我不能。它顯示在不同的行中。Css Inline does not work

下面是代碼：

的index.php

<body> 

<div id="headerbar"> 
    Hello World 
</div> 

<div id="mainmenu-bar"> 
    <div id="mainmenu-content"> 
     <img src="http://www.conceptcupboard.com/resource-centre/wp-content/uploads/2013/04/recycle-logo.gif" height="75" width="75" style="margin-top:5px;"> 
     <h1>Text that I don't see, because is down</h1> 


    </div> 

</div> 

<div id="content"> 
    <h1 color="white">Hello World</h1> 
</div> 

</body>

和layout.css中

@font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);} 

body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;} 

#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;} 
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;} 
#mainmenu-content{margin: 0 auto; width:1000px;}

你可以在這裏進行測試：http://jsfiddle.net/6WYk4/

來源

2014-01-16 user3203690

這是什麼都使用JavaScript或PHP做什麼？ –

嘗試'

這裏的東西

' –

是因爲您沒有內聯塊阻塞h1，默認情況下它顯示爲塊。嘗試：

#mainmenu-bar h1{ 
    display:inline-block; 
}

完整的例子與垂直對齊：

http://jsfiddle.net/6WYk4/3/

來源

2014-01-16 17:53:26 kamus

<h1>是塊級元件。使用span代替:)

來源

2014-01-16 17:52:28 n1kkou

的原因它們不是並排是因爲它們是塊級元素。你需要添加一個浮點數。

此外，內聯樣式是不良習慣。

<img src="http://www.conceptcupboard.com/resource-centre/wp-content/uploads/2013/04/recycle-logo.gif" class="derp" /> 

<style type="text/css"> 
    .derp { 
     height:75px; 
     width:75px; 
     margin-top:5px; 
     float:left; 
    } 
</style>

來源

2014-01-16 17:54:12

試試這個小提琴：http://jsfiddle.net/WurrZ/

#mainmenu-content img {float:left;} 
#mainmenu-content h1 {float:left; width:600px;} 
#content {clear:both;}

的圖像和H1需要花車和內容需要被清除。

來源

2014-01-16 17:56:20 Aaron

添加float:left;到img的CSS

來源

2014-01-16 17:58:58 MaxLascombe

Css Inline does not work

這裏的東西

回答

相關問題