Question

我在固定宽度<li>内有一系列方形ul元素。当它们到达<ul>的边缘时，它们会落到一个新行上，因此有3行<li> s（想象一个由<li>元素组成的砖墙。）

我需要将所有这些固定到<ul>的顶部边缘，因此只有一行，所有这些行都在顶部。问题是如果我使用position: absolute; top:0;，水平位置就会丢失。

有没有办法用javascript这样做，以便保留水平位置，但它们固定在<ul>的顶部？它们都会重叠并堆叠在彼此之上并不重要

Answer 1

您必须让它们自然布局，然后将其样式更改为position:absolute，top:0和left:(insert the value of each element's offsetLeft)。

编辑：示例

var container = document.getElementById('hover-days');
var elements = container.getElementsByTagName('li');
var lefts = [];

// first read the values
for(var i = 0; i < elements.length; ++i) {
    lefts[i] = elements[i].offsetLeft;
}

// then set them
for(var i = 0; i < elements.length; ++i) {
    var el = elements[i];
    el.style.left = lefts[i] + 'px';
    el.style.top = '0px';
    el.style.position = 'absolute';
}

Answer 2

如果您可以使用CSS3选择器，:nth-child()伪选择器可以帮助您（您有一个固定的宽度列表，所以我假设您将始终具有相同数量的li s连续）。

ul { width: 150px; height: 150px; position: relative; }

li { width: 50px; height: 50px; position: absolute; top: 0; left: 0; }

li:nth-child(3n-1) { left: 50px; }

li:nth-child(3n) { left: 100px; }

jsFiddle Demo

如果你需要一个jQuery解决方案，我写了这个小巧的函数：

$('li').css('left', function (index) {
    var $me=$(this),
        myWidth=$me.width(),
        myLeft=(index % 3)*myWidth;
    return myLeft;
});

此代码假定li已设置为position: absolute; top: 0;而ul设置为position: relative，所有宽度和高度均使用CSS设置。

2nd jsFiddle Demo

阅读您的评论，只需使用#hover-days ul li代替li作为jQuery选择器。

使用JS将所有元素固定到div的顶部，但保持水平位置

2 个答案: