如何将Li与Boostrap并排对齐3

Question

I would like to have my icon <i> and my text <h3><p> side by side, and not one on top of the other. I have been trying float:left; and display:inline-block; but nothing works...

Help anyone? Thanks a lot.

My 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>

My CSS

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

Answer 1

.step li {
  display: table; 
}

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

Demo link

Answer 2

You have to put the class selector next to the ul.

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

View in a browser's style sheet viewer (F12 on most modern browsers) and make sure these styles aren't being out trumped by a bootstrap style. If it is you will have to make this more specific, for example add a class to li and then add that to your css selector.