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

Answer 2

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

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

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

如何将li与bootstrap 3并排排列

2 个答案: