在静态页面制作中，通过设置父级ul的overflow-x:auto和overflow-y:hidden，以及子级li的display: inline-table来实现多个div水平排列，并自动显示横向滚动条。避免使用浮动显示，因为会导致子级元素溢出后向下排列。同时，文章探讨了display属性的不同值及其含义。
前几天做了一个静态页面（见http://todo.yajunw.com）,要实现多个div水平排列，并且自动出现横向滚动条。本来以为只需父级ul元素的overflow-x:auto;overflow-y:hidden,子级li浮动显示，即可以实现。结果测试发现结果并非想象的那样，浮动的子级li在溢出父级ul后，它会自动向下排列，不会保持水平排列了。(可能是li元素中包含了很多div的缘故吧)
从网上找解决方案，比如display;inline;white-space:nowrap;等等这些都试过，发现这些方法在我的页面上得不到理想效果。后来想到不让子级li元素浮动显示，利用display:inline-table来实现水平排列。如下：
/*ul元素样式*/
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
