我在固定宽度<li>
内有一系列方形ul
元素。当它们到达<ul>
的边缘时,它们会落到一个新行上,因此有3行<li>
s(想象一个由<li>
元素组成的砖墙。)
我需要将所有这些固定到<ul>
的顶部边缘,因此只有一行,所有这些行都在顶部。问题是如果我使用position: absolute; top:0;
,水平位置就会丢失。
有没有办法用javascript这样做,以便保留水平位置,但它们固定在<ul>
的顶部?它们都会重叠并堆叠在彼此之上并不重要
答案 0 :(得分: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';
}
答案 1 :(得分:1)
如果您可以使用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; }
如果你需要一个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设置。
阅读您的评论,只需使用#hover-days ul li
代替li
作为jQuery选择器。