得到p标签排列标题

嗨，大家好，我创建了一个简单的fa icon，我想要一个p标签的标题排列与另一个，但由于某种原因，我似乎无法让它符合标准向上。我希望以下所有文字与下面的标题一致。所以要与标题保持一致，不要低于图片。得到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>内容是相当长的它落下到，因为这两个摊开线：

来源

2017-10-09 RonTheOld

添加到您的CSS：

li { 
white-space: nowrap; 
}

来源

2017-10-09 23:18:22

改变从display: inline-block;的<p>'s显示器display: inline;将它移动到同一行图标圈。也许尝试移动<i>出<ul>，并添加float: left;

来源

2017-10-09 23:16:45 Laura

得到p标签排列标题

回答

相关问题