几个小时以来，我一直在寻找和尝试不同的方法。我似乎无法将这两个图像和文本全部放在一行上。我希望图像和文本都在一行排列的图像、文本、图像、文本我的图像是这样编码的，具有简单的样式
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
我的“liketext”类只有一个简单的文本颜色修饰符。使用此代码，第一个图像和文本位于同一行，下一个图像和文本位于下一行。我希望所有四个对象都在同一行。我真的试图自己解决这个问题，并感谢提供的任何帮助，希望这篇文章也能帮助其他人，谢谢！
您可以使用（在 h4 元素上，因为它们默认为块）
display: inline-block;
或者您可以将元素浮动到左侧/右侧
float: left;
只是不要忘记清除浮动后
clear: left;
@VSB 在下面分享的浮动左/右选项的更多视觉示例：
<h4>
<div style="float:left;">Left Text</div>
<div style="float:right;">Right Text</div>
<div style="clear: left;"/>
</h4>您可以通过设置简单地将父标签中的图像和文本居中
div {
text-align: center;
}
垂直居中 img 和 span
img {
vertical-align:middle;
}
span {
vertical-align:middle;
}
您可以在下面添加第二组，要提一提的是 h4 具有块显示属性，因此您可能需要设置
h4 {
display: inline-block
}
设置h4“内联”。
此处显示了完整的示例。
<div id="photo" style="text-align: center">
<img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
<span style="vertical-align:middle">Take a photo</span>
</div>这个问题是从 2012 年开始的，从那一天起有些事情发生了变化，并且由于它仍然从 google 获得大量流量，所以我想通过添加flexbox作为解决方案来完成它。
到目前为止，建议使用flexbox模式，即使它缺乏 IE9 支持。
您唯一需要关心的是添加display: flex父元素。默认情况下，无需设置其他属性，该元素的所有子元素将在同一行对齐。
如果你想了解更多flexbox，你可以在这里做。
.container {
display: flex;
}
img {
margin: 6px;
}<div class="container">
<img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>vertical-align: text-bottom;
经过测试，这对我来说非常有效，只需将其应用于图像即可。
首先，我不建议使用内联样式。如果必须，您应该尝试将浮点数应用于每个项目：
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>
<h4 style='float:left;" class='liketext'>$likes</h4>
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>
<h4 style='float:left;" class='liketext'>$dislikes</h4>
之后可能需要进行一些调整，并清除浮动。
参见示例：http: //jsfiddle.net/6Rpkh/
<style>
img.likeordisklike { height: 24px; width: 24px; margin-right: 4px; }
h4.liketext { color:#F00; display:inline }
</style>
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
</p>
H4 元素是块显示类型的元素。您可以强制 H4 具有内联显示类型，或者简单地使用像 P 这样的内联元素并根据需要设置它的样式。
供参考：http ://www.w3.org/TR/CSS21/visuren.html#propdef-display
因此，您将更改 H4 的显示类型，例如：
<html>
<head>
<title>test</title>
<style type='text/css'>
h4 { display: inline }
</style>
</head>
<body>
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
</body>
</html>
在这种情况下，您可以使用 display:inline 或 inline-block。
例子：
img.likeordisklike {display:inline;vertical-align:middle; }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>不要使用 float:left 因为再次需要写一个更清晰的行和它的旧方法也..
尝试插入你img的h4
DEMO
<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>$dislikes</h4>