创建这样的列表[关闭]答案

【问题标题】：Create a list like this [closed]创建这样的列表[关闭]
【发布时间】：2014-03-30 00:55:27
【问题描述】：

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

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

我该怎么做？

Link to what I'm trying now

【问题讨论】：

请贴出代码..
你能创建一个jsfiddle吗？调试jsfiddle.net会更容易

标签： css

【解决方案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/

【讨论】：

div.box可以去掉，规则可以用ul.list > li代替。
哇这个好用！！我不知道那个“>”标志是做什么的。小伙伴们天天学习！非常感谢编辑：我今天也了解到我的标题不是很清楚：/
您好！现在我正在处理不同的图像作为子弹，我尝试使用 code .box > li:nth-child(2) { background-image: url(img/shop-icon.png); } code 但根本不起作用！有什么注意事项吗？
框在li元素内，因此它必须是li:nth-child(2) > .box。