Question

我正在尝试使用以下类：

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

通过在css文件中使用以下行

在一行中：

.title1{display: inline}

但我仍然用两种不同的方式获得它们。如何将其更改为内联？

Answer 1

要以内联方式显示图像和文本，您必须更改其各自的display属性;改变父母是不够的。默认情况下，图像将以内嵌方式显示，但<h5>默认显示为块，这意味着它始终占据整个宽度，因此它显示在自己的行上。如果您将<h5>更改为内联显示，它将显示在图像旁边。像：

.title1 h5 {
    display: inline; 
}

Answer 2

你的css适用于你的主要部分＆＃34; title1＆＃34;但是，您希望这适用于其子女。你可以测试一下这个css：

＆＃13;

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

＆＃13;

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

＆＃13;

但是请务必知道，使用内嵌显示，您无法像在线块一样轻松地设置大小。

Answer 3

display属性指定用于HTML元素的框的类型。我不认为对你的工作是正确的。试试：

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

并且css：#img {float: left;}

Answer 4

试试这个，

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

如果不行，请告诉我

将标题和图像内嵌在html中

4 个答案: