列出被忽略的内容

时间:2013-12-05 11:33:37

标签: 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标签的内容,请参阅图像:

enter image description here

Here是jsfiddle。

2 个答案:

答案 0 :(得分:1)

对我来说是在firefox中工作,但你确实需要清除你的浮动。最简单的方法是在列表项上使用overflow: hidden,这样它就会占用浮动图标的空间并将其填充包裹在其周围而不仅仅是旁边的文本

答案 1 :(得分:0)

试试这个我的问题很慢

CSS

给浮动:留在下面的课程

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

并给出浮动:留在下面的课程

li{float:left;}