CSS выравнивает изображения и текст на одной строке

Я искал и пробовал разные методы в течение нескольких часов. Я просто не могу представить эти два изображения и текст на одной строке. Я хочу, чтобы и изображения, и оба текста были на одной линии, размещены изображение, текст, изображение, текст. Мои изображения закодированы так, как это делается с простыми стилями.

 <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" есть простой текстовый модификатор цвета. С помощью этого кода первое изображение и текст находятся на одной строке, а следующее изображение и текст находятся в строке ниже. Я хочу, чтобы все четыре объекта находились в одной строке. Я действительно попытался решить этот вопрос самостоятельно и оценить любую помощь, данную и, надеюсь, этот пост может помочь другим также поблагодарить вас!

Ответ 1

Вы можете использовать (по элементам h4, поскольку они по умолчанию блокированы)

display: inline-block;

Или вы можете перемещать элементы влево /rght

float: left;

Просто не забудьте очистить поплавки после

clear: left;

Более наглядный пример для опции float left/right, как показано ниже @VSB:

<h4> 
    <div style="float:left;">Left Text</div>
    <div style="float:right;">Right Text</div>
    <div style="clear: left;"/>
</h4>

Ответ 2

Во-первых, я бы не рекомендовал использовать встроенные стили. Если вам нужно, вы должны попробовать применить поплавки к каждому элементу:

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

Может потребоваться некоторая настройка после этого и очистка поплавков.

Ответ 3

См. пример: 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>

Ответ 4

Элемент 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>

Ответ 5

В этом случае вы можете использовать display: встроенный или встроенный блок.

Пример:

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>

Ответ 6

попробуйте вставить 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>