开发者

Right Align an inline UL which is inside a div

I have a pagination output which is show within

    . An example is posted here: http://jsfiddle.net/6N4bD/1/

    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

    0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜