css - 每行超过一个列表项(基于分辨率)

Question

我正在开发一个移动应用程序，屏幕上会显示一个元素列表。元素有一定的尺寸。虽然纵向智能手机每行只能显示一个元素，但我想让它在横向模式下每行显示两个元素，或者在平板电脑上它可以在一行中显示 4 个元素......屏幕尺寸为尽可能多地放在同一行中。

我知道我需要使用媒体查询来完成它...我尝试使用 display:inline 来完成它但是它覆盖了我创建的设置宽度并拉伸(stretch)了元素以适应整个屏幕。

所以问题是:如何使 div 保持我配置的大小并在一行中显示屏幕大小允许的尽可能多的元素？

提前感谢您的回复!

Answer 1

使用 -

ul  li {
    display:inline-block ; 
}

此处演示 - http://jsfiddle.net/urielz/QFK37/1/