Align social icons in same line as text CSS

Question

I want to have a short text to the left, and to the right, some social icons.

The logic is the following: I have a paragraph element <p> with some text, which is left centered (float:left), and after this text, inside this paragraph, I have an horizontal list of social icons, created with <span>, which is aligned to the right (float:right).

Still, it does not work, because icons appear below the text:

This is the fiddle (although icons do not work, because they are imported).

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

Why do you have a list inside a paragraph? It should be outside.Please check this post: http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside — Gurtej Singh, Apr 10 '17 at 08:59
@GurtejSingh To make sure the two elements (text and horizontal list) are in the same line. Will do. Thanks. — luchonacho, Apr 10 '17 at 09:01

hdotluna · Accepted Answer · 2017-04-10T09:25:52.820

1

As Gurtej Singh advise.

Change your markup. Ul must be outside the paragraph. I added parent element so we can use flex for vertical alignment.

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

<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>

edited Apr 10 '17 at 09:25

answered Apr 10 '17 at 09:03

hdotluna

5,514
4
20
31

Oh, I see. So, you created a flex box, and inside, two elements, one to the left (text) and one to the right (icons). – luchonacho Apr 10 '17 at 09:07
@luchonacho yes. I used flexbox, so you wont worry about vertical alignment. `align-items: center`. You can use float, display inline, etc. But for me it's the easiest method property. – hdotluna Apr 10 '17 at 09:08
It does align the items, but they do not stretch the whole line. width 100% does not help either. Any hint on how to achieve? – luchonacho Apr 10 '17 at 09:24
@luchonacho just add `justify-content: space-between` See my update. – hdotluna Apr 10 '17 at 09:26
1

Thanks! Didn't know that one! – luchonacho Apr 10 '17 at 09:35

score 0 · Answer 2 · answered Apr 10 '17 at 09:03

0

You need to cancel the padding-start

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

(the default for Chrome, at least, is 40px)

answered Apr 10 '17 at 09:03

itamar

3,837
5
35
60

score 0 · Answer 3 · answered Apr 10 '17 at 09:11

0

Here is a solution based on your code ,I moved the <span> and clean a class

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

answered Apr 10 '17 at 09:11

O.Rares

1,031
1
16
19

Align social icons in same line as text CSS

3 Answers3