Css 列出被忽略的内容

我有一个日历事件列表。html如下所示：

   <li data-id="1">
        <a href="#calendar-item/1">
            <div class="calendar" style="">
                    <div class="calendar-header"></div>
                    <div class="calendar-month">Dec</div>
                    <div class="calendar-day">11</div>
            </div>               
            <p>Parents Association Non-Uniform Day</p>
            <span class="chevron"></span>
        </a>
    </li>

我对列表项进行了填充，但它忽略了div标记的内容，请参见下图：

---

是JSFIDLE。

在firefox中对我有效，但你需要清除浮动。最简单的方法是在列表项上使用

溢出：隐藏

，这样它就占用了浮动图标的空间，并将其填充物环绕在浮动图标周围，而不仅仅是它旁边的文本

CSS

给弗洛特：留在下面的课堂上

li p:nth-of-type(1) {float:left;}

li{float:left;}

给弗洛特：留在下面的课堂上

li p:nth-of-type(1) {float:left;}

li{float:left;}