css - 如何显示内联数浏览器大小更改时宽度为 100%？

Question

我想以 100% 的视口大小显示 li 元素。我从这里的问题中找到了解决方案，但这还不足以满足我的需要，也就是说，即使浏览器大小发生变化，我也希望 li 元素保持 100% 的宽度。是否可以只使用纯css？还是我需要使用额外的 javascript 代码？谢谢。

Answer 1

我把另一个帖子放在一个小提琴中检查，它对我来说工作正常，你确定你使用了所有正确的参数吗？

div {overflow:auto;width:100%;}
ul {margin:0;padding:0;white-space:nowrap;}
li {width:100%;display:inline-block;}

http://jsfiddle.net/PDVEM/1/

编辑：要回答您的评论，我不确定是否可以将滚动条位置和窗口大小与纯 css 同步（可能使用一些 text-align:center; 技巧），但可以使用 javascript：

//store the current scroll value
div.scroll(function(){
    currentScrollPos = div.scrollLeft();
    currentLi = (currentScrollPos/divWidth);
})

//on resize re-positions the scrollbar        
$(window).resize(function(){
     divWidth = parseInt(div.css('width'));
     newScrollPos = currentLi*divWidth;
     div.scrollLeft(newScrollPos);
})

有关完整示例，请参见此小提琴：

http://jsfiddle.net/PDVEM/3/