css - 奇怪的有序列表

Question

好的，我有一个奇怪的有序列表，我需要构建我不知道该怎么做。

这就是我要找的样子

这是HTML...

            <ol class="container">
              <li>
                <span>Order: <strong><a href="#">59179</a></strong></span>
                <div>Order Date: <strong>04/29/2013</strong></div>
                <div class="clear"></div>
                Status: <strong>In Process</strong>
              </li>
            </ol>

CSS

 ol.container li span{float:left;}
 ol.container li div{float:left;padding-left:20px}

一切看起来都是我想要的方式，除了 1. 由于某种原因向右浮动。我错过了什么...

Answer 1

您可能不想float: left在有序列表中使用 span 和 div。display: inline-block在非cleardiv上使用可能会更幸运。例如：

ol.container li span{ }
ol.container li div { display: inline-block;}
ol.container li div.clear { display: block;}

http://jsfiddle.net/SiCurious/CgQgp/