Css 创建一个这样的列表

我正在尝试使用CSS创建一个如下列表：

首先，我尝试使用列表，但每次我试图将这两段与项目符号对齐时，都会出错

我该怎么做

---

可以使用以下列表：

<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>

---

演示：

请发布代码。你能创建一个JSFIDLE吗。调试jsfiddle.net会更容易

div.box

可以删除，规则可以替换为

ul.list>li

。哇，这很管用！！我不知道那个“>”符号是什么意思。每天都在学习，伙计们！非常感谢编辑：我今天也知道我的标题不太清楚：/Hello，又来了！现在我正在处理不同的图像作为项目符号，我尝试使用

code

.box>li:nth child（2）{background image:url（img/shop icon.png）；}

code

，但根本不起作用！有抬头吗？该框位于

li

元素内，因此它必须是

li:n子项（2）>.box

。

.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;
}