html - rodee - CSS alinea imágenes y texto en la misma línea
poner texto al lado de una imagen html (6)
Primero, no recomendaría usar estilos en línea. Si debe, debe intentar aplicar flotadores a cada elemento:
<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>
Podría requerir algunos ajustes posteriores y limpiar los flotadores.
He estado buscando e intentando diferentes métodos durante horas. Parece que no puedo obtener estas dos imágenes y texto en una línea. Quiero que tanto las imágenes como el texto estén en una sola línea. Imagen, texto, imagen, texto. Mis imágenes están codificadas de esta manera con estilos simples atacados.
<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>
Mi clase de "texto similar" solo tiene un modificador de color de texto simple. Con este código, la primera imagen y el texto están en la misma línea, y la siguiente imagen y texto está en la línea inferior. Quiero que los cuatro objetos estén en la misma línea. Realmente he tratado de resolver esta pregunta por mi cuenta y agradezco toda ayuda que me han brindado y espero que esta publicación también pueda ayudar a otros. ¡Gracias!
Un elemental H4 es un elemento de tipo de visualización de bloque. Podría forzar al H4 a tener un tipo de visualización en línea, o simplemente usar un elemento en línea como P y darle el estilo que desee.
Para referencia: http://www.w3.org/TR/CSS21/visuren.html#propdef-display
Entonces cambiarías el tipo de pantalla del H4 como:
<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>
Ver ejemplo en: 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>
1.
intenta insertar tu img dentro de tu DEMO h4
<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>
En este caso, puede usar display: inline o inline-block.
Ejemplo:
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>
No use float: left porque de nuevo necesita escribir una línea más clara y su método anterior también ...
Puede usar (en los elementos h4, ya que son bloques por defecto)
display: inline-block;
O puede flotar los elementos hacia la izquierda / derecha
float: left;
Simplemente no te olvides de limpiar las carrozas después
clear: left;
Más ejemplos visuales para la opción flotante izquierda / derecha que se comparte a continuación por @VSB:
<h4>
<div style="float:left;">Left Text</div>
<div style="float:right;">Right Text</div>
<div style="clear: left;"/>
</h4>