css - 如何水平对齐社交图标

标签 css

我试图水平对齐“共享本类(class)”图标下的图标,它在边栏中有效,但在我的内容中无效。有什么建议吗?

例子在这里

http://www.themarketinggroup.ca/canscribe/courses/medical-transcription-healthcare-documentation-course/

最佳答案

侧边栏中的图标向左浮动。

一个解决方案是添加 float: left 规则到 .widget li 选择器,如下所示:

.widget li { float: left; }

然后您可以使用填充或边距规则在每个图标之间添加所需的间距量。

你也可以使用 flexbox .在这种情况下,您要做的是使 ul 具有一类 socials display: flex 并添加额外的 justify-content 规则,为图标提供一些水平间距。像这样:

ul.socials { display: flex; justify-content: space-around; }

我喜欢后一种解决方案,因为它会为您安排图标间距。

关于css - 如何水平对齐社交图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45448081/

相关文章:

javascript - 悬停/鼠标悬停时背景图像消失,菜单在 IE 中不起作用

css - 居中固定宽度布局在 IE6 中中断

css - 为什么我的 CSS float 不能正常工作? (宽度、高度和 float 在 CSS 中定义)

javascript - 从 javascript 中的工具提示复制文本?

javascript - 更改选择突出显示的高度

html - 如何使@keyframes 从当前属性值开始?

css - 链接的不同颜色

css - 滚动并单击后导航在 Chrome 中消失

css - React Native 阴影不显示

jquery - 图片在 webkit 中乱七八糟