得到p標籤排列標題

Question

嗨，大家好，我創建了一個簡單的fa icon，我想要一個p標籤的標題排列與另一個，但由於某種原因，我似乎無法讓它符合標準向上。我希望以下所有文字與下面的標題一致。所以要與標題保持一致，不要低於圖片。

HTML：

<div class="section1"> 
    <div class="container" id="section1"> 
     <div class="row"> 
     <div class="col-5"> 
      <ul class="get_in"> 
      <li> 
       <i class="fa fa-laptop"></i> 
       <p>Title</p> 
       <p>Web DevelopmentWeb DevelopmentWeb DevelopmentDevelopmentWeb DevelopmenDevelopmentWeb Developmen</p> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div> 

CSS：再次

.section1 .get_in li i { 
    background: none repeat scroll 0 0 #373432; 
    border-radius: 50%; 
    color: white; 
    height: 60px; 
    line-height: 33px; 
    margin-bottom: 10px; 
    padding: 12px; 
    text-align: center; 
    width: 60px; 
    font-size:34px; 
} 

.get_in p { 
    display: inline-block; 
    padding-left: 10px; 
} 

i { 
    margin-right:6px; 
} 

.get_in li i:hover { 
    background: #434343; 
    color: white; 
    -webkit-transition: background-color 200ms linear; 
    -moz-transition: background-color 200ms linear; 
    -o-transition: background-color 200ms linear; 
    -ms-transition: background-color 200ms linear; 
    transition: background-color 200ms linear; 
} 

fiddle link

感謝。然而

.get_in p { 
display: inline; 
padding-left: 10px; 
} 

，作爲第二<p>內容是相當長的它落下到，因爲這兩個攤開線：

Answer 1

添加到您的CSS：

li { 
white-space: nowrap; 
} 

Answer 2

改變從display: inline-block;的<p>'s顯示器display: inline;將它移動到同一行圖標圈。也許嘗試移動<i>出<ul>，並添加float: left;