当前位置：文江博客话题详情

对齐社交媒体共享按钮，使其看起来更美观

发布于 2024-11-19 15:18:50 字数 216 浏览 5 评论 0原文

我刚刚将社交共享按钮放回我的主页，它们放在一起看起来真的很糟糕:)

您可以在页面底部查看它：http://www.comehike.com

人们通常如何让它们如此自然地融合在一起？我的看起来很混乱而且不专业。造型方面有什么可以做的吗？

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巾帼英雄 2024-11-26 15:18:50

查看您的代码，您可能必须向每个类添加单独的类，因为它们都位于不同的元素中。有几种方法，绝对定位，显示：内联，但我建议浮动

添加一个 ul 元素，并将每个“共享按钮”作为该 ul 的 li 子元素

<ul class='shareLinks'>
<li>facebook here</li>
<li>twitter here</li>
</ul>

，然后你的 css 看起来像这样，

ul.shareLinks { overflow: auto; }
ul.shareLinks li { list-style: none; float: left; margin-right: 5px; }

你显然可以编辑css随你所愿，要点是 float: left the Overflow: auto; ul 上修复了没有实际高度的浮动元素。

Looking at your code you'll likely have to add individual classes to each one, as they are all in different elements. There are a few approaches, absolute positioning, display:inline but I'd recommend floats

add a ul element and each of your 'share buttons' as an li child element of that ul

<ul class='shareLinks'>
<li>facebook here</li>
<li>twitter here</li>
</ul>

then your css can look something like this

ul.shareLinks { overflow: auto; }
ul.shareLinks li { list-style: none; float: left; margin-right: 5px; }

you can obviously edit the css how ever you wish, the main point is the float: left the overflow: auto; on the ul is a fix for the floated elements not having a real height.

回复收藏 0 原文

~没有更多了~