我怎樣才能在頁面上並排顯示這些圖標？

Question

我試圖讓圖標看起來像this，並居中在頁面上。

HTML：

<aside class="social"> 
    <ul class="smicons"> 
    <li class="fbicon"><a href="http://facebook.com"><img src="img/fbicon.png"></a></li> 
    <li class="twicon"><a href="http://twitter.com"><img src="img/twicon.png"></a></li> 
    <li class="yticon"><a href="http://youtube.com"><img src="img/yticon.png"></a></li> 
    <li class="igicon"><a href="http://instagram.com"><img src="img/igicon.png"></a></li> 
    </ul> 
</aside> 

CSS：

.social { 
    display: inline-block; 
} 

.smicons { 
    background-color: transparent; 
    list-style-type: none; 
    border: none; 
    float: left; 
    padding-top: 15px; 
    display: inline-block; 
} 

Answer 1

這裏是基於你的CSS的解決方案。檢查CSS的部分，那些評論。對不起，我的英語不好。

.social { 
 
display:block; /*need aside as a block element by default aside is block */ 
 
    text-align:center;/*text align center set the ul section to center ;*/ 
 
} 
 

 
.smicons { 
 
    background-color: transparent; 
 
    list-style-type: none; 
 
    border: none; 
 
    padding-left:0;/*ul element by default padding-left:40px;*/ 
 
    padding-top: 15px; 
 
    display: inline-flex;/*inline-flex set those icon side by side */ 
 
}

<aside class="social"> 
 
    <ul class="smicons"> 
 
    <li class="fbicon"> 
 
     <a href="http://facebook.com"><img src="https://cdn2.iconfinder.com/data/icons/social-18/512/Facebook-3-128.png"></a> 
 
    </li> 
 
    <li class="twicon"> 
 
     <a href="http://twitter.com"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png"></a> 
 
    </li> 
 
    <li class="yticon"> 
 
     <a href="http://youtube.com"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-128.png"></a> 
 
    </li> 
 
    <li class="igicon"> 
 
     <a href="http://instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-128.png"></a> 
 
    </li> 
 
    </ul> 
 
</aside>

Answer 2

這裏是一個flexbox解決方案。

.smicons, 
 
.smicons li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.smicons { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.smicons li { 
 
    margin: 5px; 
 
}

<aside class="social"> 
 
    <ul class="smicons"> 
 
    <li class="fbicon"><a href="http://facebook.com"><img src="http://placehold.it/25x25/FC0"></a></li> 
 
    <li class="twicon"><a href="http://twitter.com"><img src="http://placehold.it/25x25/FC0"></a></li> 
 
    <li class="yticon"><a href="http://youtube.com"><img src="http://placehold.it/25x25/FC0"></a></li> 
 
    <li class="igicon"><a href="http://instagram.com"><img src="http://placehold.it/25x25/FC0"></a></li> 
 
    </ul> 
 
</aside>