Question

我想以100％的视口大小显示li元素。我找到了来自the question here的解决方案，但是我的需求还不够，也就是说，即使浏览器大小改变，我也希望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; tricks），但是可以使用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/

当浏览器大小发生变化时，如何以100％宽度显示内联几个<li>？</li>

1 个答案: