2014-12-08 2 views
0

Я пытаюсь получить заголовок и изображение, чтобы выстроить линию точно в одной строке, но у меня возникают трудности. Может ли кто-нибудь понять, почему/предложить исправить?Получение изображения для отображения в той же строке, что и мой заголовок

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#header img { 
    position: relative; 
    width: 75px; 
    height: 75px; 
} 
#header h1 { 
    color: white; 
    float: left; 
    background-color:#006890; 
    font: 75px arial, sans-serif; 
} 
</style> 
</head> 
<body> 

<div id="header"> 
<h1>Header</h1> 
    <img src="2000px-Smiley.svg.png" alt="Smiley Face" > 
</div> 
</body> 
</html> 

ответ

3

Это из-за поля по умолчанию h1, вы видите? элементы имеют стиль по умолчанию, и вам нужно настроить его на свои нужды, как правило, для чего вы хотите удалить margin-top из h1, но вы также можете установить его на margin: 0;, если вам не нужен margin-bottom.

#header h1 
{ 
    color: white; 
    float: left; 
    background-color:#006890; 
    font: 75px arial, sans-serif; 
    margin: 0; 
} 

пример: http://jsfiddle.net/L2e1rL6L/

-2

Вам не нужно будет иметь изображение внутри <h1><img > </h1> тегов?

+0

Спасибо, ребята. Брандмауэр корпорации снизился, когда я пытался редактировать. – whatever5599451

0

В дополнение к #header h1 CSS вы должны сделать

#header h1 { 
margin:0; 
} 

это так.

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