Obraz z logo i nagłówek H1 na tej samej linii

Question

Chcę utworzyć moją pierwszą stronę internetową, ale napotkałem problem.

Mam następujący kod:

<img src="img/logo.png" alt="logo" /> 
<h1>My website name</h1> 

Chcę wiedzieć, jak zrobić logo i H1, aby być w tej samej linii. Dzięki!

Answer 1

Jako przykład (DEMO):

HTML:

<div class="header"> 
    <img src="img/logo.png" alt="logo" /> 
    <h1>My website name</h1> 
</div> 

CSS:

.header img { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: #555; 
} 

.header h1 { 
    position: relative; 
    top: 18px; 
    left: 10px; 
} 

DEMO

Answer 2

w pliku css zrobić img { float: left; } i h1 {float: left; }

Answer 3

Spróbuj tego:

<img style="display: inline;" src="img/logo.png" alt="logo" /> 
<h1 style="display: inline;">My website name</h1> 

Answer 4

Spróbuj tego:

1. Włóż oba elementy w div kontenera.
2. Daj tego kontenera przepełnienia nieruchomości: auto
3. pływak oba elementy w lewo przy użyciu pływaka: lewy
4. Daj H1 szerokość tak, że nie zajmuje całej szerokości jego kontenera nadrzędnego.

Answer 5

Jeśli obraz jest częścią logo dlaczego nie to zrobić:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1> 

Zastosowanie CSS do stylu to lepiej.

Najlepiej też uczynić swoje logo hiperłączem, które przenosi użytkownika z powrotem na stronę główną.

Więc można zrobić:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1> 

Answer 6

można to zrobić jako Billy Fosa mówiłem, owinąć <img> i <h1> w <div> i używać float: left; unosić swój obraz w lewo, ustawić <div>width i niż ustawić line-height dla h1 i używać <div style="clear: float;"></div> wyczyścić twoje pływające elementy.

Fiddle

Answer 7

Wystarczy trzymać tag img wewnątrz znacznika h1 jako część zawartości.

Answer 8

Sprawdź to.

.header{width:100%; 
    } 

    .header img{ width: 20%; //or whatever width you like to have 

    } 

    .header h1{ 

    display:inline; //It will take rest of space which left by logo. 
} 

Answer 9

użyję bootstrap i ustawić HTML jako:

<div class="row"> 
    <div class="col-md-4"> 
     <img src="img/logo.png" alt="logo" /> 
    </div> 
    <div class="col-md-8"> 
     <h1>My website name</h1> 
    </div> 
</div>