Question

我试图让我的社交媒体图标并排排列，但它不起作用？我可能只是在密集，但今天我的大脑已经糊涂了。

HTML

 <div class="row">
      <div class="small-12 columns">
        <div class="panel">
            <div class="icons">
             <img src="assets/webicon-facebook.png" alt="facebook link"> 
             <img src="assets/webicon-googleplus.png" alt="google plus link">
 </div>
 </div>

我曾尝试过显示并内联，但这并没有奏效。我不知道基金会网格是否在搞乱它？

Answer 1

因为您将它们更改为显示：阻止它们不再显示为内联。您有两种选择：显示内联块或浮动它们。

选项1：

.panel img {
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}

选项2：

.panel img {
display: inline-block;
margin-left: auto;
margin-right: auto;
}

Answer 2

根据您的要求，您可以使用：

内联列表：http://foundation.zurb.com/docs/components/inline_lists.html

<div class="row">
    <div class="large-12 columns>
        <div class="panel">
            <ul class="inline-list">
                <li><a href="#"><img src="assets/webicon-facebook.png" alt="facebook link"></a></li>
                <li><a href="#"><img src="assets/webicon-googleplus.png" alt="google plus link"></a></li>
            </ul>
        </div>
    </div>
</div>

阻止网格：http://foundation.zurb.com/docs/components/block_grid.html

 <div class="row">
        <div class="large-12 columns>
            <div class="panel">
                <ul class="small-block-grid-2">
                    <li><a href="#"><img src="assets/webicon-facebook.png" alt="facebook link"></a></li>
                    <li><a href="#"><img src="assets/webicon-googleplus.png" alt="google plus link"></a></li>
                </ul>
            </div>
        </div>
    </div>

希望有所帮助。

将我的社交媒体图标放在彼此旁边？

2 个答案: