У меня есть стиль и индекс. Я хочу отображать логотип и текст в одной строке, но я не могу. Он отображается в другой строке.Css Inline не работает

Вот код:

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; 
}

полный пример с вертикальной Align:

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

источник

2014-01-16 17:53:26 kamus

<h1> является уровень блока элемент. Используйте вместо этого span :)

источник

2014-01-16 17:52:28 n1kkou

Причина они не бок о бок, потому что они являются элементами уровня блока. Вам нужно добавить float.

Кроме того, встроенные стили - вредные привычки.

<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 «s

источник

2014-01-16 17:58:58 MaxLascombe

Css Inline не работает

Что-то здесь

ответ

Смежные вопросы