mettre du texte et des images sur la même ligne à l'intérieur d'un élément de la liste - html/css
Je me demandais si quelqu'un pourrait m'aider avec un petit html/css problème que j'ai. En gros, je suis en train de faire une liste non ordonnée avec une autre image pour la balle de chaque élément de la liste, avec un texte à droite sur la même ligne. Plus précisément, un en-tête sur la ligne du haut et une certaine normale de texte ci-dessous. Pour le moment, je peux obtenir l'image et le texte sur la même ligne 🙁 Voici mon code.
Toute aide serait grandement appréciée.
Html:
<ul>
<li class="service-list">
<a href=""><img src="image.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
<h3>Header</h3>
<p>
text goes here
</P>
</li>
....
</ul>
CSS:
.service-list {
list-style-type: none;
margin-left:0px;
padding-left:0px;
float: left;
display: inline-block;
}
.service-list p {
text-align: right;
margin: 0;
padding: 0;
}
display: inline-block; display: inline;
doivent être assignées aux éléments que vous souhaitez rester dans une ligne.Vous devez les accepter une réponse.
OriginalL'auteur Pectus Excavatum | 2013-06-08
Vous devez vous connecter pour publier un commentaire.
Tout en utilisant
ne pas utiliser
Essayer
Ici est la Lien pour Violon
OriginalL'auteur Venkat Selvan
Je déconseille le "tabluar l'approche". Les Tables sont des tables. Utilisation
<div>
à la place.J'ai simplement tourner la
<a>
dans un bloc élément et envelopper le contenu dans un<div>
et float gauche.HTML:
CSS:
Voici le code modifiable: http://codepen.io/andreacanton/pen/lykDA
Remarque: la hauteur de la
<ul>
ne sera pas bon calculé par le navigateur, car contenir flottait éléments. Donc, vous devez ajouter un peu declear:both <div>
ou de force à la hauteur de la<ul>
élément.OriginalL'auteur andreacanton