html - 如何将 li 与 bootstrap 3 并排对齐

Question

我想要我的图标<i>和我的文字 <h3><p>并排，而不是一个在另一个之上。我一直在努力float:left;和 display:inline-block;但没有任何效果......

帮助任何人？非常感谢。

我的 HTML

<div class="steps">
 <div class="container">
  <div class="row">
   <div class="col-xs-12 col-sm-4">
    <ul class="step">
     <li><i class="fa fa-question fa-4x"></i></li>
     <li><h3>Ask</h3><p>Talk 1-on-1 with caring professionals who are online and ready to help you now.</p></li>
    </ul>
   </div>
  </div>
 </div>
</div>

我的 CSS

.steps ul li {
display:inline-block;
float:left;}

Answer 1

.step li {
  display: table; 
}

.step li:first-child {
  float: left;    
}

Demo link