Question

然而，添加了许多点，我希望它们在一条线上均匀间隔，而不是越过线的宽度。这是我到目前为止所做的，直到添加了太多图像才能正常工作，然后它们就会结束。

var count = $('#dots img').length;
var dotW = $('.dot').width();
var line = $('#line').width();

var x = count * dotW;
var y = line - x;
var z = y / (count + 1);

$('.dot').css('margin-left', z);

查看jsfiddle。 http://jsfiddle.net/kirkr/2L9eg/ 复制并粘贴图片标签以进行更多测试。

我错过了什么？

感谢。

Answer 1

您的问题是图像之间的空白。使用这个CSS：

#dots {
    font-size: 0;
}

它运作正常。

修改

稍微玩了一下。如果需要，可以用图像替换div。请务必从图像中删除尽可能多的空白。

http://jsfiddle.net/2L9eg/6/

Answer 2

你的计算很好，这是HTML中的空白空间造成的空间超出预期。

Here's a version without whitespace between theimg tags

Answer 3

在页面加载每个“点”后，只需应用具有所需属性（可能是边距）的css类。 IE：

$(document).ready(function() {
    $(".dot").css("margin-right","10px");
});

同等地空间未知数量的图像水平

3 个答案: