list - li a 内的两个浮动跨度

Question

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

请注意橙色没有填满该区域并且两个跨度没有对齐......

http://jsfiddle.net/qN4Tp/3/

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