将社交图标与文本CSS对齐在同一行

时间:2017-04-10 08:55:41

标签: html css

我希望左边有一个简短的文字,右边有一些社交图标。

逻辑如下:我有一个段落元素<p>带有一些文本,它们居中(float:left),在此文本之后,在这段内,我有一个横向列表使用<span>创建的社交图标,与右侧(float:right)对齐。

但是,它不起作用,因为图标在 下方显示

enter image description here

这是fiddle(虽然图标不起作用,因为它们已导入)。

HTML:

<p class="post-meta"> April 7, 2017 
  <span class="share-icons">
    <ul class ="social-icons" style="list-style: none">
      <li class="zocial-twitter"></li>
      <li class="zocial-facebook"></li>
      <li class="zocial-googleplus"></li>
      <li class="zocial-reddit"></li>
    </ul>
  </span>
</p>

CSS:

@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;
}

3 个答案:

答案 0 :(得分:1)

正如Gurtej Singh所说。

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

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

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

* {
  margin: 0;
  padding: 0;
}

.flex {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

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

.share-icons {
    float: right;
}

.social-icons li {
    display:inline-block;
    padding: 5px;
}
&#13;
<div class="flex">
   <p class="post-meta">April 7, 2017</p>
  <ul class ="social-icons" style="list-style: none">
    <li class="zocial-twitter"></li>
    <li class="zocial-facebook"></li>
    <li class="zocial-googleplus"></li>
    <li class="zocial-reddit"></li>
  </ul>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您需要取消padding-start

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

(Chrome的默认值,至少为40px)

答案 2 :(得分:0)

以下是基于您的代码的解决方案,我移动了<span>并清理了一个类

https://jsfiddle.net/r1ngjh6k/2/