J'essaie d'aligner 4 éléments d'affilée. Ce que j'ai fait en utilisant display: inline-block. Je les ai ensuite combinés en un seul élément (avant-page-post-info) afin qu'ils soient tous centrés ensemble. Le problème est que je ne peux pas éditer le margin-top: de chaque élément individuellement. Par exemple, je veux que le bouton Lire plus soit déplacé un peu en dessous de toutes les images. Donc j'ai mis marge-dessus: 20px; - mais cela fait juste descendre les 4 éléments. Comment puis-je éditer chaque élément individuellement, et pas tous combinés ensemble?Mettre en place 4 éléments d'affilée et les combiner en un seul élément
jsFiddle - https://jsfiddle.net/s8Lm3hou/2/
et html css
.front-page-post-info {
margin: 0 auto;
align-content: center;
align-items: center;
text-align: center;
}
.moretext {
display:inline-block;
text-transform: uppercase;
font-size: 18px;
margin-right:20px;
margin-top:20px;
}
.front-page-shop-image {
display:inline-block;
margin-right:20px;
}
.main-share-button {
display:inline-block;
margin-right:20px;
}
.comments {
display:inline-block;
}
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<div class="front-page-shop-image"><img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" /></div>
<div class="main-share-button"><img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" /></div>
<div class="comments"><img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" /></div></div>