奇怪的有序列表

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 div上使用clear可能会更幸运。例如：

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

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