把兩個HTML元素在同一行與自定義CSS

li元素的內部的兩個html元素，我需要把這兩個在同一直線上，

<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，我需要一些css技巧來有效地處理它

編輯：我試過this和其他一些喜歡它但不能解決可溶性已經我的問題

來源

2017-07-12 TyForHelpDude

你爲什麼不'float'的fontawesome圖標'left'？ – UncaughtTypeError

添加word-break:break-all打破字，如果他們沒有任何空間單行。和flex以獲得正確的內嵌文本與使用的圖標。

只需添加下面的CSS

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

來源

2017-07-12 14:00:16 LKG

我會接受這個答案，但你能告訴我什麼是差異性「顯示：彎曲」和「文字休息」。當我應該使用這個顯示：flex東西？ – TyForHelpDude

我補充說明請檢查。 flex可以在需要單線時使用。更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – LKG

只需添加顯示：彎曲李的CSS來

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

來源

2017-07-12 13:58:33

這裏是解決方案。它會爲您提供長文字省略號&整個linkedin url保留一個工具提示。

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

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

來源

2017-07-12 14:06:47 Shiladitya

謝謝，我也會保留這一點！ – TyForHelpDude

把兩個HTML元素在同一行與自定義CSS

回答

相關問題