List li a内的两个浮动跨度

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

请注意，橙色没有填满该区域，两个跨距也没有对齐

此CSS可能会帮助您

向li添加一个属性。只需添加溢出：隐藏。并减小事件名称类的宽度。仅此而已：）

---

这是小提琴

我不确定你的标题是否正确。你在浮动跨距而不是div上有困难吗？这是我一直在寻找的解决方案！在使用overflow:hidden之前，我浮动的图像和跨距没有被限制在li标记中。另外一个提示：要使包含文本的范围适合文本宽度，请使用

width:auto

。

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

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}