创建一个这样的列表

Question

我正在尝试使用CSS创建一个像这样的列表：

首先我尝试使用列表，但每当我尝试将两个段落与子弹对齐时，就出错了。

我该怎么做？

Link to what I'm trying now

Answer 1

可以使用列表：

<ul class="list">
    <li>
        <div class="box">
            <span class="icon"></span>
            <div class="container">
                <h2>Headline</h2>
                <small>Description is small.</small>
            </div>
        </div>
    </li>
</ul>

CSS：

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box > :first-child {
    background-color: #000;
    float: left;
    height: 48px;
    width: 48px;
}

.box > :not(:first-child) {
    margin-left: 60px;
}

h2 {
    margin-bottom: 0;
}

small {
    display: inline-block;
}

演示：http://jsfiddle.net/enk9D/1/