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

小提琴鏈接

再次感謝。

Answer 1

添加到您的CSS：

li {
white-space: nowrap;
}

Answer 2

從display: inline-block;更改<p>'s顯示display: inline-block; display: inline; 將它移到同一行：

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

但是，由於第二個<p>內容很長，因為圖標圈，它會下降到兩條展開的線上。 也許嘗試將<i>移出<ul>並添加一個float: left;