带有图标

Question

我需要使用html和css在同一行中添加更多文本和图标 something like this

这是页面：https://app.box.com/s/xpy18er6dyz5cm9jf4b01fa4jof7cxwx （你必须下载它）
怎么做？

Answer 1

您可能希望使用div。您可以使用display的css属性使它们对齐。

<强> 实施例

https://jsfiddle.net/fpvctpjs/5/

Answer 2

我认为这是你正在寻找的东西。它对你很敏感，所以你可以有点灵活。我在css中创建了一个圆圈，但您可以轻松地将其与图像切换出来或自己将其放入圆圈中。

https://jsfiddle.net/7r6gL7hc/

<div class="container">
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
</div>

CSS:

.container { max-width:800px; margin: 0 auto;}

.column { width: 25%; text-align: center; float: left;}

.circle { background: red; border: black 6px solid; border-radius: 50%; width: 150px; height: 150px; color: black; margin: 0 auto;}

.title { text-align: center; width:100%; font-size: 30px; padding: 10px 0; text-decoration: underline; text-transform: uppercase;}

.description { text-align: center; width: 100%; max-width: 100px; margin: 0 auto;}