css - 如何使用 CSS 将垂直元素对齐为水平元素并移动到屏幕右侧？

Question

我正在开发一个插件，需要使用 CSS 将一些社交按钮对齐到右侧。但是按钮不是在一条线上(水平)显示，而是垂直显示。这是相关代码。

<div class= "sc1"><div class= "sc2"><span>Connect with us:</span> 
<div class= "sc3"><a href="http://www.facebook.com"><div class="facebook-icon"></div></a>
<a href="http://www.twitter.com"><div class="twitter-icon"></div></a>
<a href="http://www.google.com"><div class="google-icon"></div></a>
<a href="http://www.instagram.com"><div class="instagram-icon"></div></a></div></div></div>

现在是 CSS

    .sc1 {
    margin: 5px 0px;
    background-color: #3498DB;
    display: inline-block;
    padding: 8px 10px;
    width: 100%;
}
.sc2{
    float: right;
    color: white;
}
.sc3 {
    float: right;

}
.sc3 .facebook-icon {
    background-image: url(images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: 0 0;
    /*float: right;*/
}
.sc3 .twitter-icon {
    background-image: url(images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: -32px 0px;
    /*float: right;*/
}
.sc3 .google-icon {
    background-image: url(images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: -125px 0px;
    /*float: right;*/
}
.sc3 .instagram-icon {
    background-image: url(images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: -63px 0px;
    /*float: right;*/
}

但在此之后代码最终结果显示为

Here's the picture

我也把完整的代码上传到了GitHub上，以防有人想看完整的代码。 Here it is.

Answer 1

您可以将 display: flex; 添加到您的 .sc3 类中:

.sc3 {
  display: flex;
}

这将使所有图标水平对齐。