如何將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選擇器中。