获取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;