Html 有序列表中的浮动跨距

我正试着在li内浮动两个跨度。左span将有我的标签，在右span中，我将构建一个带有嵌套span的图形。我有基本的结构，但chrome将数字放在左跨的末尾。如何解决此问题

HTML

项目css

ol.matchGraph { width: auto;margin: 0;}
ol.matchGraph li {margin-bottom: 5px;}
ol.matchGraph li .leftLabel {float: left; width: 60%;display: block;}
ol.matchGraph li .rightMatch { float: right;width: 38%;display: block;}

这是FF、Chrome和IE的显示屏

---

您只需在

items.css

中修改css即可

ol.matchGraph { width: auto; margin: 0;}
ol.matchGraph li {margin-bottom: 5px;}
ol.matchGraph li .leftLabel {width: 60%; display: inline-block;}
ol.matchGraph li .rightMatch {width: 38%; display: inline-block;}

---

这没用。Chrome仍然在做同样的事情。我已经切换了leftLabel和rightMatch跨距的位置，然后将它们都向右浮动。Chrome现在已将数字放置在正确的位置。在这种情况下，无需浮动，只需使用

display:inline block

。我用铬合金做了测试，效果非常好。下面是一个例子：

ol.matchGraph { width: auto;margin: 0;}
ol.matchGraph li {margin-bottom: 5px;}
ol.matchGraph li .leftLabel {float: left; width: 60%;display: block;}
ol.matchGraph li .rightMatch { float: right;width: 38%;display: block;}

ol.matchGraph { width: auto; margin: 0;}
ol.matchGraph li {margin-bottom: 5px;}
ol.matchGraph li .leftLabel {width: 60%; display: inline-block;}
ol.matchGraph li .rightMatch {width: 38%; display: inline-block;}