如何将Li与Boostrap并排对齐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;    
}

演示链接

Answer 2

您必须将类选择器放在ul旁边。

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

在浏览器的样式表查看器中查看（在大多数现代浏览器中为F12），并确保这些样式不会被引导样式所取代。 如果是这样，则必须对此进行更具体的说明，例如，将一个类添加到li中，然后将其添加到您的css选择器中。