put two html element in same line with custom css

Question

there is two html element inside of a

li element and I need to put these two in same line,

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<li class="linkedin">
       <i class="fa fa-linkedin"></i>
       <a href="#" target="_blank">https://www.linkedin.com/in/mehmet-yener-yilmaz-
           833a07101/</a>
    </li>

sive, I need some css tricks to handle it efficiently

edited: i tried this and some others like it but cant resolve my issue

Why don't you `float` the fontawesome icon `left`? – UncaughtTypeError Jul 12 '17 at 13:59 — UncaughtTypeError, Jul 12 '17 at 13:59

score 1 · Answer 1 · answered Jul 12 '17 at 13:58

1

just add display : flex to the css of li to

.sidebar-wrapper .contact-list li {
    margin-bottom: 15px;
    display: flex;
}

answered Jul 12 '17 at 13:58

Seifeddine Besbes

393
1
9

LKG · Accepted Answer · 2017-07-12T14:07:01.633

1

Add word-break:break-all to break word if they are single line without any space. and flex to get proper inline text with used icons.

Just add following css

    .sidebar-wrapper .contact-list li {
        margin-bottom: 15px;
        word-break: break-all; /* Added */
        display:flex;   /* Added */
    }

edited Jul 12 '17 at 14:07

answered Jul 12 '17 at 14:00

LKG

4,152
1
11
21

I will accept this answer but can you tell me whats diffirence "display: flex" and "word-break". when I should use this display:flex stuff? – TyForHelpDude Jul 12 '17 at 14:06
1

I added explanation please check. flex can use when you need in single line. more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – LKG Jul 12 '17 at 14:07

score 1 · Answer 3 · answered Jul 12 '17 at 14:06

1

Here is the solution. It will provide you ellipsis for long text & for entire linkedin url keep a tooltip.

.linkedin { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.linkedin > a {
  vertical-align: middle;
}

answered Jul 12 '17 at 14:06

Shiladitya

12,003
15
25
38

Thanks, I will keep this also! – TyForHelpDude Jul 12 '17 at 14:09

put two html element in same line with custom css

3 Answers3