CSS对齐图片和文字上的同一行 [英] CSS align images and text on same line

问题描述

我一直在寻找和尝试不同的方法来小时了。我似乎无法得到这两个图像，并在一行文本中的所有。我想无论是图像和文字给所有在同一行排列的图像，文字，图像，文字我的图片codeD这样简单的款式attacted

I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line arranged image, text, image, text My images are coded like this with simple styles attacted

 <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类只是有一个简单的文本颜色调节剂。与此$ C C的第一图像和文本$是在同一行上，而下一个图像和文字上线之下。我希望所有四个对象是在同一行。我真的想解决这个问题，对我自己和AP preciate任何帮助，给定的，希望这篇文章可以帮助其他人也谢谢！

My "liketext" class is just has a simple text color modifier. With this code the first image and text are on the same line, and the the next image and text is on the line below. I want all four objects to be on the same line. I really have tried to solve this question on my own and appreciate any help given and hopefully this post can help others as well thank you!

推荐答案

您可以使用（在H4的元素，因为它们是块默认情况下）

You can either use (on the h4 elements, as they are block by default)

display: inline-block;

或者你可以浮动的元素向左/ rght

Or you can float the elements to the left/rght

float: left;

只是不要忘了在

Just don't forget to clear the floats after

clear: left;

这篇关于CSS对齐图片和文字上的同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！