每行多个列表项（基于分辨率）

Question

我正在开发一个移动应用，其中有一个显示在屏幕上的元素列表。这些物品有一定的尺寸。虽然肖像上的智能手机每行只能显示一个项目，但我想让它在横向模式下每行显示两个，或者在平板电脑上显示4个可以放入一行... W / e尺寸屏幕是在同一行中尽可能多地适合。

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

所以问题是：如何使div保持我配置它的大小并在屏幕尺寸允许的一行中显示多个元素？

提前感谢您的回复！

Answer 1

使用 -

ul  li {
    display:inline-block ; 
}

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

Answer 2

也许这可以作为评论更好 - 但看起来你没有按预期使用显示属性 - 保持你可以使用的宽度：

display:inline-block;

或

float:left;