连续设置 4 个元素并将它们组合为一个元素

Question

我正在尝试将 4 个元素对齐成一行。我使用 display:inline-block 做了这些。然后，我将它们全部组合成一个元素（首页-post-信息），这样它们就会全部居中。问题是我无法单独编辑每个元素的 margin-top: 。例如，我希望将阅读更多按钮移动到所有图像下方一点点。所以我把 margin-top:20px; - 然而，这只是让所有 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>

Answer 1

添加position:relative；和 top:Xpx；

https://jsfiddle.net/scorpio777/s8Lm3hou/6/

<style>
.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;
    position:relative;
    top:20px;
}
.front-page-shop-image {
    display:inline-block;
    margin-right:20px;
    position:relative;
    top:10px;
}
.main-share-button {
    display:inline-block;
    margin-right:20px;
    position:relative;
    top:30px;
}
</style>

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

连续设置 4 个元素并将它们组合为一个元素

Set up 4 elements in a row and combine them to one element

html

css

display