CSS设计不均匀？

Question

好吧，我在一小时内推出这个网站（测试版），但我刚注意到一个丑陋的bug。我添加了一个新的计数器（1,2,3等）以前使用<ol>。

看看之前的这张照片：

一切都是均匀的，投票按钮，文字一直向下。

现在添加新计数器后的实时版本：www.leapfm.com是不均匀的。 （当它变成两位数时）

请使用FireBug或Chrome开发者工具，如果您需要任何其他代码，我会尽快提供。

原始代码：

.subtext1 {
font-family: Verdana;
font-size: 7pt;
color: #828282;


}

.song {
    height: 42px;
}
.counter {
float: left;
margin-right: 2px;
font-size: 14px;


}
.subtext {
font-family: Verdana;
font-size: 7pt;
color: #828282;

}

.title {
font-family: Verdana;
font-size: 10.3pt;
color: #828282;

}

Answer 1

• 对于.subtext1，请给它margin-left: 15px。
• 对于.counter，请将其设为100%或22px。
• 并删除 和.title之间的多个.subtext1。

Answer 2

（我正在添加一个答案，因为我无法通过评论预览我的代码而且他们没有给我足够的空间。） 是的，ol（或表）会起作用。但快速解决方案是给计数器一个固定的宽度（比如说30px）。唯一的问题是如果你开始有更多的数字。

如果您想使用JavaScript（可以永久使用）修复此问题，请使用此类代码（jQuery）。

 <script type="text/javascript">
      var counters = $(".counter");
      var counterLen = counters.length; //one based
                                 //convert to zero based
      var largestWidth = counters[counterLen - 1].offsetWidth + "px";

      //WAY ONE: DO IT WITH A STYLESHEET (I recommend this)

      var stylesheetDiv = $("<div>");
      stylesheetDiv.html("<style type=\"text/css\">.counter{width: " + largestWidth + "}</style>");

      $("head").append(stylesheetDiv);

      //WAY TWO: DO IT WITH A JQUERY LOOP
      counters.css({width: largestWidth});
 </script>

我之前用过的方式。我很确定我必须在IE8中使用样式表来做div。