Question

尝试在日历中设置几个li的样式，但在li中创建两个列时会有点麻烦。

注意橙色没有填满区域，两个跨距不对齐......

<ol>
    <li>
        <a href="#">
            <span class="event-time">12:00pm</span>
            <span class="event-name">Retail sales grew at their fastest pace in seven years during July, according to the latest data from the British Retail Consortium and KPMG. Sales were up 2.2% year-on-year, driven by…
</span>
        </a>
    </li>
</ol>

Answer 1

这个CSS可能对你有帮助。

向li添加属性。只需添加溢出：隐藏即可。并减少event_name类的宽度。多数民众赞成：）

ol { width: 83%;  margin:0; }
li { line-height: 1.2; margin: 0; padding: 5px; list-style-type: none; background: #d4481b; border:1px solid ; color: #ccc; overflow:hidden}
a { text-decoration: none; line-height:1.2}
.event-time { width: 20%; float: left; display:inline}
.event-name { width: 70%; float: left; display:inline}

这是小提琴。 http://jsfiddle.net/JPrqT/

里面有两个漂浮的跨度

1 个答案: