More than one list item per line (based on resolution)

Question

I'm working on a mobile app where there's a list of elements displayed on the screen. The items are of a certain size. While a smartphone on portrait can only display one item per line, I'd like to have it displaying two per line on landscape mode, or on a tablet where it can fit 4 in a line... W/e size the screen is fit as many as possible in the same line.

I understand I need to use media querys to get it done... I tried using display:inline to get it done but it overwrote the set width I created and stretched the items to fit the whole screen.

So the question is: how do I make a div stay the size I configure it and display as many elements in one line as allowed by the screen size?

Thanks for the responses in advance!

Answer 1

Use -

ul  li {
    display:inline-block ; 
}

Here demo - http://jsfiddle.net/urielz/QFK37/1/

Answer 2

Perhaps this is better off as a comment - but it looks like you are not using the display property as intended - to maintain width you can use:

display:inline-block;

or

float:left;