I have a fiddle set up where li items are vertically aligned and floated to the right.
The issue I'm facing is with the order of the items - currently, they appear as test3, test2, and then test1. However, I want them to display in the order of test1, test2, and finally test3.
Any ideas on how I can fix this?
Just a note: The li items are dynamically pulled from a database.
HTML
<div id="wrapper">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
CSS
#wrapper{
width: 500px;
height: 300px;
background-color: yellow;
display: table;
}
ul{
display: table-cell;
vertical-align: middle;
text-align:right;
}
li{
display: inline-block;
text-align: center;
padding: 30px;
margin: 5px;
background-color: red;
}