0

好的，我将在一小时内启动这个网站（测试版），但我刚刚注意到一个丑陋的错误。我添加了一个以前使用的新计数器（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;

}
4

2 回答 2

1
  • 对于.subtext1，给它一个margin-left: 15px。
  • 对于.counter，给它一个高度100%或22px。
  • 并删除 和之间&nbsp;的倍数。.title.subtext1
于 2013-08-04T23:23:06.507 回答
1

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

如果你想使用 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。

于 2013-08-04T23:51:25.000 回答