如何水平对齐社交图标

Question

我正在尝试水平分享“共享此课程”图标下的图标，它在边栏中工作，但不在我的内容中。有什么建议吗？

此处示例

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

Answer 1

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

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

.widget li { float: left; }

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

您也可以使用flexbox。在这种情况下你要做的是使用一类社交显示ul：flex并添加justify-content的附加规则以给图标一些水平间距。像这样：

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

我喜欢后一种解决方案，因为它会为你分隔图标。

Answer 2

实现这一目标的可能方法是使用 float

    .display_inline li  {
                 float: left; // inline elements in left             
                 margin: 10px;  //to create some space between the icons

                   }