把標題和圖片內嵌在HTML

我試圖把下面的類：把標題和圖片內嵌在HTML

<div class="title1"> 
    <img src="themes/images/logo.png" alt="logo"/> 
    <h5>Name</h5> 
</div>

在一行中使用下面的行CSS文件：

.title1{display: inline}

，但我仍然得到他們在兩條不同的路線。如何將其更改爲內聯？

來源

2016-02-25 user5948783

只使用float：左頁眉和浮動：正確的圖像 –

'h5'標籤默認爲block，也將其設置爲'display：inline-block' –

@BilalUsean，no。只是...沒有 – Chris

要顯示圖像和文本內聯，您必須更改其個人display屬性;改變父母是不夠的。圖像默認情況下會內聯顯示，但<h5>默認顯示爲一個塊，這意味着它總是佔用全部寬度，因此它顯示在它自己的行上。如果您將<h5>更改爲內聯顯示，則它將顯示在圖像旁邊。如：

.title1 h5 { 
    display: inline; 
}

來源

2016-02-25 21:46:40 BurningLights

工作！謝謝 – user5948783

然而，你的CSS適用於你的主div「title1」，你希望這適用於它的孩子。您可以測試這個CSS：

.title1 > img, .title1 > h5 { display:inline; }

<div class="title1"> 
 
    <img src="themes/images/logo.png" alt="logo"/> 
 
    <h5>Name</h5> 
 
</div>

但是一定要知道，與內嵌顯示，你將無法設置大小一樣容易inline-block的。

來源

2016-02-25 21:46:23

display屬性指定用於HTML元素的框的類型。我不認爲你的工作是正確的。嘗試：

<div> 
    <img id = "img" src="themes/images/logo.png" alt="logo"/> 
    <h5>Name</h5> 
</div>

和CSS：#img {float: left;}

來源

2016-02-25 21:46:46 Thanagor

剛剛嘗試這一點，

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h2{display:inline-block} 
img{display:inline-block} 
</style> 
</head> 
<body> 
<h5>The New</h5> 
<img src="themes/images/logo.png" /> 
</body> 
</html>

如果不行讓我知道

來源

2016-02-25 21:51:21

把標題和圖片內嵌在HTML

回答

相關問題