Question

我试图连续排列4个元素。我使用display做了哪些：inline-block。然后我将它们全部组合成一个元素（front-page-post-info），这样它们就会集中在一起。问题是我不能单独编辑每个元素的margin-top：。例如，我希望read more按钮在所有图像下方稍微移动一点。所以我把margin-top：20px; - 然而，这只是使所有4个元素向下移动。如何单独编辑每个元素，而不是所有元素组合在一起？

jsfiddle - https://jsfiddle.net/s8Lm3hou/2/

css和html

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

添加位置：相对;和顶部：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个元素并将它们组合成一个元素

1 个答案: