設置連續4個元素並將它們合併爲一個元素

我試圖對齊一行中的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>

來源

2017-06-17 user7548188

添加位置：相對;和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>

來源

2017-06-17 13:57:10 DanielaB67

設置連續4個元素並將它們合併爲一個元素

回答

相關問題