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

Question

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

0

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

Вот код:

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/

user3203690 16 янв. 2014, в 19:06

Источник

3

Какое это имеет отношение к JavaScript или PHP?
Sterling Archer 16 янв. 2014, в 17:49
0

Попробуйте <h1 style='color: white;'>Something here</h1>
Viswalinga Surya S 16 янв. 2014, в 17:49

Теги:

html

css

5 ответов

0

Причина, по которой они не бок о бок, состоит в том, что они являются элементами уровня блока. Вам нужно добавить 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>

Sterling Archer 16 янв. 2014, в 16:17

0

Добавить float:left; к img css

MaxLascombe 16 янв. 2014, в 16:11

0

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

n1kkou 16 янв. 2014, в 15:56

0

Попробуйте эту скрипку: http://jsfiddle.net/WurrZ/

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

Изображение и h1 нуждаются в поплавках, и содержимое необходимо очистить.

Aaron 16 янв. 2014, в 15:36

Ещё вопросы

Какое это имеет отношение к JavaScript или PHP?
Попробуйте <h1 style='color: white;'>Something here</h1>

kamus · Accepted Answer · 2014-01-16T16-26-00.000Z

Это потому, что у вас нет встроенного блока h1, по умолчанию он отображается как блок. попробуй это:

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

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

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