ruby-on-rails - CSS 设计不均匀？

Question

好的，我将在一小时后启动此网站(测试版)，但我刚刚注意到一个丑陋的错误。我添加了一个新的计数器(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

(我正在添加一个答案，因为我无法通过评论预览我的代码，而且他们没有给我足够的空间。)是的，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。