Question

我正在建立一个网站，该页面的页脚内具有通常的社交媒体链接：

它们位于HTML元素中，编码为：

Notification Extension

如何强制按钮的对齐方式或填充方式一致？

或者，如果我想使用自己的图标并隐藏它们，是否有标准的方法可以做到这一点？

谢谢标记

Answer 1

这种构造方式是错误的！请使用表格作为数据而不是样式。将其更改为div，您会发现使其易于移动响应。

尝试嵌套div，以便您可以移动主div，其中的所有子div都将移动。

尝试这样的事情：

.social { display: inline-block; }

<div id="social-icons">

  <div class="social"><a href="#"><img src="http://lorempixel.com/50/25/"></a></div>
  <div class="social"><a href="#"><img src="http://lorempixel.com/50/25/"></a></div>
  <div class="social"><a href="#"><img src="http://lorempixel.com/50/25/"></a></div>
  <div class="social"><a href="#"><img src="http://lorempixel.com/50/25/"></a></div>
  
</div>

并在较小的屏幕上查看时进行更改-例如；移动设备，然后在达到特定设备尺寸时使用media queries对齐内容。

媒体查询CSS：

@media screen and (max-width: 480px) {
    .social {
         display: block;
         width: 100%;
    }
}

当然，请将CSS样式更改为您喜欢的任何样式。

Answer 2

我会使用flex而不是表格布局。将父元素设置为display: flex;和align-items: top;。这迫使.social的直接子代在顶部对齐。

.social {
  display: flex;
  align-items: top;
}

.social a {
  padding: 5px 10px;
  margin: 5px;
  background-color: yellow;
}

 <div class="social">
    <a href="#">Facebook</a>
    <a href="#">Instagram</a>
    <a href="#">Pinterest</a>
    <a href="#">Twitter</a>
</div>

Answer 3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="social">
    <table>
        <tr>
            <td>
                <button type="button" class="btn btn-info">
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <a href="" class="twitter-share-button">Tweet</a>&nbsp;</button>
            </td>
            <td>
                <button type="button" class="btn btn-success">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <a href="" class="twitter-share-button">Like</a>&nbsp;</button>
            </td>
            <td>
                <button type="button" class="btn btn-success">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <a href="" class="twitter-share-button">Share</a>&nbsp;</button>
            </td>
            <td>
                <button type="button" class="btn btn-danger">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <a href="" class="twitter-share-button">Save</a>&nbsp;</button>
            </td>
        </tr>
    </table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

一致的社交媒体按钮

3 个答案: