Holen Sie sich P-Tag mit Header ausrichten

Question

Hallo Jungs, ich bin ein einfaches erstellen fa icon und ich möchte die Überschrift von einem p Tag mit Anthere eine Linie, aber aus irgendeinem Grund kann ich nicht scheinen, um es zur Linie zu bekommen oben. Ich würde mir wünschen, dass der gesamte Text unten mit dem Titel übereinstimmt. Also in der gleichen Zeile wie der Titel, nicht unter dem Bild.

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

Nochmals vielen Dank.

Answer 1

zu Ihrem CSS hinzufügen:

li { 
white-space: nowrap; 
} 

Answer 2

Ändern der <p>'s Display vor display: inline-block; zu display: inline; wird es auf die gleiche Zeile nach oben:

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

Da jedoch die zweite <p> Gehalt ziemlich lang ist es sinkt nach unten auf zwei verteilt Linien wegen der Symbolkreis. Vielleicht versuchen, die <i> aus dem <ul> bewegen und das Hinzufügen eines float: left;