Right Align an inline UL which is inside a div
I have a pagination output which is show within
The ul is wrapped around 2 divs
1st div is 550 width 2nd div called "paginationDiv" basically wraps the ul around
The ul has list-style: none. What I am trying to do is make it float right, but it keeps appearing as a block. I have tried quite a few things but nothing seems to work. If I add a width to the paginationDiv then it works but it's not accurate because it will never be fixed width
Here is what it looks like:
<div class="parentDiv">
<div class="paginationDiv">
<ul id="paginationLinks">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
That's the html code
Here is the css:
div.parentDiv {
width: 550px;
}
div.paginationDiv {
float: right;
}
#paginationLinks ul {
border: 0;
padding: 0;
margin: 0;
}
#paginationLin开发者_如何学运维ks li {
list-style: none;
}
I have posted an example here: http://jsfiddle.net/6N4bD/1/
What seems to work is adding display: inline;
to the li elements.
http://jsfiddle.net/XFdqT/ has a demo of this.
give float:left
to #paginationLinks li
and then see the result
精彩评论