2
我试图对齐一行中的4个元素。我使用的显示器:内联块。然后,我将它们全部合并为一个元素(前页面发布信息),以便它们都集中在一起。问题是我无法单独编辑每个元素的页边空白处。例如,我希望读取更多按钮在所有图像下移动一点。所以我把margin-top:20px; - 但是,这只是让所有4个元素向下移动。我如何单独编辑每个元素,而不是将它们全部组合在一起?设置连续4个元素并将它们合并为一个元素
的jsfiddle - https://jsfiddle.net/s8Lm3hou/2/
CSS和HTML
.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>