Html 将我的社交媒体图标排列在一起？

我试图让我的社交媒体图标并排排列，但它不起作用？ 我可能只是太笨了，但我今天脑子里乱七八糟的

HTML

---

我曾经尝试过显示和内联操作，但没有成功。我不知道基础网格是不是在扰乱它？

，因为你把它们改成了显示：块，它们不再显示在内联中。有两个选项：内联块显示或浮动

备选案文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;
}

---

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

内联列表：

---

希望有帮助

不看演示是不可能的。请创建一个JSFIDLE或链接到live站点。至少，还包括CSS usedDo您是否有与上述示例相关联的CSS？如果是这样的话，你能把它贴出来吗？另外，你有4个打开的

标签，但其中只有两个是关闭的。有一些图像丢失了，但在中间的是我的社交媒体图标。我还关闭了div标记。@misxcurious.panel img{}是否有CSS规则？如果我在Chrome中为你的图像使用开发者工具并删除“display:block”，它会按照你的意愿工作。我完全删除了显示元素，现在它们并排出现了。但我不能把它们作为一个整体放在页面底部的中心位置。如果我尝试这两种方法中的任何一种，它们最终会堆叠在中间，但一种堆叠在另一种之上。如果显示：inline block，则可以将父div设置为text align:center；在您的例子中，您的.icons类将设置文本algin:center；如果你使用了我的选项2，它就不起作用了。我在这一点上很恼火，我把他们留在原地，明天再回到这个问题上来。谢谢你的帮助。

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

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

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