把标题和图片内嵌在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

回答

相关问题