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

再次感谢。

Answer 1

添加到您的CSS：

li {
white-space: nowrap;
}

Answer 2

将<p>'s显示从display: inline-block;更改为display: inline;会将其移到同一行：

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

然而，由于第二个<p>内容很长，因为图标圈圈，它会下降到两条展开的线条上。也许尝试将<i>移出<ul>并添加float: left;

获取p标签以与标题对齐

2 个答案: