Html 将社交图标与文本CSS对齐

我想在左边有一个简短的文本，在右边有一些社交图标

逻辑如下：我有一个段落元素

，带有一些文本，以左为中心（

float:left

），在这个文本之后，在这个段落中，我有一个社交图标的水平列表，用

创建，它与右侧对齐（

float:right

）

但它仍然不起作用，因为图标显示在文本下方：

这就是问题所在（尽管图标不起作用，因为它们是导入的）

HTML:

---

您需要取消填充开始

    ul.social-icons{
-webkit-padding-start: 0px;
}

---

（Chrome的默认值至少是40px）

正如古特吉·辛格所建议的那样

更改标记。Ul必须在段落之外。我添加了父元素，所以我们可以使用flex进行垂直对齐

@导入url(http://weloveiconfonts.com/api/?family=zocial);
/*带状*/
[类别*=“zocial-”]：之前{
字体系列：“zocial”，无衬线；
}
* {
保证金：0；
填充：0；
}
.flex{
填充：20px；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
·职位名称{
文本对齐：左对齐；
字号：700；
}
.post meta{
边际上限：0；
右边距：15px；
颜色：灰色；
字号：700；
溢出：隐藏；
}
.共享图标{
浮动：对；
}
.社会偶像李{
显示：内联块；
填充物：5px；
}

2017年4月7日

这是一个基于您的代码的解决方案，我移动了

并清理了一个类

---

为什么在段落中有一个列表？它应该在外面。请检查此帖子：@GurtejSingh以确保两个元素（文本和水平列表）在同一行中。行。谢谢。哦，我明白了。因此，您创建了一个flex box，里面有两个元素，一个在左侧（文本），一个在右侧（图标）。@luchonacho yes。我使用了flexbox，所以您不会担心垂直对齐<代码>对齐项目：居中。您可以使用float、display inline等。但对我来说，这是最简单的方法属性。它会对齐项目，但不会拉伸整行。宽度100%也没有帮助。关于如何实现的任何提示？@luchonacho只需添加

justify content:space-between

查看我的更新。谢谢！我不知道那个！

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
    font-family: 'zocial', sans-serif;
}

.post-title {
    text-align: left;
    font-weight: 700;
}

.post-meta {
    margin-top: 0;
    color: grey;
    font-weight: 700;
    overflow: hidden; 
}

.share-icons {
    float: right;
}

.social-icons li {
    display:inline;
    padding: 5px;
}

    ul.social-icons{
-webkit-padding-start: 0px;
}