HTML – 如何在CSS中同时获取图标和标题

概述我希望图标和标题在同一行中,如下所示： 但我仍然是这样的： 代码： .icon-small i{ height: 38px; width: 38px; color: #fff; background-color: #888; border-radius: 10%; text-align: center; vertical-align: middle; padd 我希望图标和标题在同一行中,如下所示：

但我仍然是这样的：

代码：

.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 >  <div >    <span >      <i ></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 >    <span >      <i ></i>      <h4>Mobile apps</h4>      <h5>For the iPhone,iPad & AndroID</h5>    </span>    <p>Apps that connect directly to your customers.</p>  </div>   <div >    <span >      <i ></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;}

解决方法 我想你想浮动图标：

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

好的方法：

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

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

总结

以上是内存溢出为你收集整理的HTML – 如何在CSS中同时获取图标和标题全部内容，希望文章能够帮你解决HTML – 如何在CSS中同时获取图标和标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。