Question

I have a <ul> list, all <li> items are displayed horizontal. What I want to do is make the last two <li> items stack vertically when the browser gets too small for them all to remain horizontal, instead of dropping to the next line.

I have created a jsfiddle example

So as you can see all the items align horizontally, but as you narrow the display window, instead of items 5 and 6 dropping to the next line I want then to stack horizontally and stay on the same line.

How can I do this?

Answer 1

Use text-align property in your <ul> it may help you.

use Like this:

ul {
    display: inline-block;
    text-align: right;
}

Working Demo