css 社交媒体图标之间的间距

omqzjyyz  于 2023-03-20  发布在  其他
关注(0)|答案(2)|浏览(172)

我有一个如下所示的设计,我试图在我的domain中复制它

上面我提到的设计并不是一个完整的设计。我们必须向下滚动到底部才能看到domain中的那个部分。我能够完成80%的设计。剩下的20%我不能完成的是我试图在我的领域中复制的社交媒体图标之间的间距。
在域中,社交媒体图标之间没有间距。I am wondering how I can increase the spacing between every social media icons so that it looks similar to the above design.
注:我在上面的设计中标记了箭头,以便让观众确切地知道我想要完成什么。这些箭头不会出现在设计中,它表示社交媒体图标之间的间距。
我试着在inspect部分使用CSS代码,但是我无法复制上面的设计。
HTML和JS代码,我已经用来获得我的网页上的社交媒体图标是:

<div style="display:inline-block;vertical-align:top">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.awardwinnersonly.com" data-text="Czech out the books, movies, and music that won major awards" data-via="BClayShannon">Tweet</a>
        <script>
            ! function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + '://platform.twitter.com/widgets.js';
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, 'script', 'twitter-wjs');

        </script>
    </div>
    <div style="display:inline-block;vertical-align:top" class="fb-like" data-href="http://www.awardwinnersonly.com" data-send="false" data-width="450" data-show-faces="false" data-font="segoe ui">
    </div>
    <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button&size=small&mobile_iframe=true&width=59&height=20&appId" width="59" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <g:plus action="share" href="https://www.example.com"></g:plus>

    <script src="//platform.linkedin.com/in.js" type="text/javascript">
        lang: en_US

    </script>
    <script type="IN/Share"></script>
8fq7wneg

8fq7wneg1#

你可以给每个社交媒体按钮增加边距,比如:

margin-right: 1em;

例如,第一个twitter按钮像:

display:inline-block;vertical-align:top;margin-right: 3em;padding-left: 15%;

你最好用一些class这样你就不会重复同样的“内联”风格了。
顺便说一句,我还建议将整个“中间”内容 Package 在一个<div class="main-content">中(仅作为示例),而不是将padding-left: 15%;设置为每个内容元素。

5q4ezhmt

5q4ezhmt2#

要在网站或应用程序上创建一个视觉上吸引人且有条理的社交媒体部分,注意社交媒体图标之间的间距非常重要。适当的间距有助于确保图标易于区分和点击。
实现良好间距的一种方法是在每个图标之间使用一致的距离,如等边距或填充。这有助于创建干净平衡的外观。此外,按平台或功能对图标进行分组也是一个好主意,如将所有消息应用程序分组在一起,或将社交媒体平台的所有图标放在一起。
例如,如果您想鼓励用户在social media上关注您的公司,您可以使用行动号召,如“与我们一起社交!在Facebook、Twitter和Instagram上关注我们,了解最新更新和新闻。”这将是一个以适当间距显示社交媒体图标的好机会,以确保它们易于识别和访问。

相关问题