html - 如何在CSS中将图标和标题放在同一行

Question

我想像这样将图标和标题放在同一行:

但我还是这样:

代码:

.icon-small i{
  height: 38px;  
  width: 38px; 
  color: #fff;
  background-color: #888;
  border-radius: 10%;
  text-align: center;
  vertical-align: middle;
  padding-top: 12px;

}
.icon-small + p{
  margin-top: 15px;

}
.icon-small h4,
.icon-small h5{
  text-align: left;
}

<div class="row">
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-television"></i>
      <h4>Web applications</h4>
      <h5>Mobile & Tablets Ready</h5>
    </span>
    <p>Powerful, fast and robust web applications to cater for complex business needs.</p>
  </div>
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-mobile-phone"></i>
      <h4>Mobile apps</h4>
      <h5>For the iPhone, iPad & Android</h5>
    </span>
    <p>Apps that connect directly to your customers.</p>
  </div> 
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-image"></i>
      <h4> Graphic </h4>
      <h5>Infographics, site designs and more</h5>
    </span>
    <p>Let our graphics speak the thousand words that you simply don't have the time to say.</p> 
  </div>
</div>

我只是做了一些事情，但没有用。我使用了 Font Awesome 和响应式网格系统。

我用它来重置默认样式:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

Answer 1

我想你想要 float 图标:

.icon-small i {
    float: left;
    margin-right: 10px;
    /* ... */
}

还有很好的措施:

.icon-small + p {
    clear: left;
    /* ... */
}

https://jsfiddle.net/mblase75/e42rsw04/