標誌圖像和H1標題在同一行

我想創建我的第一個網頁，但遇到了問題。標誌圖像和H1標題在同一行

我有以下代碼：

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

我想知道如何使標誌和H1是在同一條線上。謝謝！

來源

2012-07-28 Six Quads

作爲例子（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

來源

2012-07-28 13:19:39

@Speransky得到了幾乎一樣..;） – 2012-07-28 13:26:05

@SperanskyDanil你值得它也是upvoting你，你錯過了'行高'和'清除'我猜 – 2012-07-28 13:32:29

在你的CSS文件做img { float: left; }和h1 {float: left; }

來源

2012-07-28 13:13:21 Andy

謝謝，但它並沒有奏效。 – 2012-07-28 13:23:49

試試這個：

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

來源

2012-07-28 13:13:27

謝謝，但它沒有奏效。 – 2012-07-28 13:23:32

它的工作原理。你可以在這裏測試它http://jsfiddle.net/JtnLQ/ – 2012-07-28 13:39:37

試試這個：

放入容器DIV兩個元素。
給該容器中的屬性溢出：汽車
浮動元素都使用浮動左：左
給了H1的寬度，以便它不會佔用全寬它的父容器。

來源

2012-07-28 13:15:08

如果你的形象是標誌，爲什麼不能做到這一點的一部分：

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

使用CSS樣式更好。

最好的做法是讓您的徽標成爲超鏈接，讓用戶回到主頁。

所以，你可以這樣做：

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

來源

2012-07-28 13:15:15

謝謝，但它沒有奏效。 – 2012-07-28 13:24:00

你可以做比利護城河告訴你，包你<img>和<h1>在<div>和使用float: left;浮動圖像左側，設置<div>width，比設置line-height爲您h1和使用<div style="clear: float;"></div>清除你的浮動元素。

Fiddle

來源

2012-07-28 13:24:33

只要堅持h1標籤裏面的img標籤作爲內容的一部分。

來源

2013-03-12 18:47:54 Dylan

你能請擴大你的答案？提供一個例子，參考文獻等...... – Kermit 2013-03-12 19:10:55

@Kermit這是相當自我解釋和爲我工作！ – 2015-11-17 04:04:04

選中此項。

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

來源

2014-07-02 10:50:00

我會用引導並設置HTML爲：

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

來源

2015-08-07 15:32:12 RustyIngles

標誌圖像和H1標題在同一行

回答

相關問題