CODEWITHSUNDEEP
htmlcss
FlyingCat
FlyingCat

Reputation: 14290

Floating issue with my ul list

I have a question regarding the ul list

I have something like

<div>
    <ul id='login'>
        <li>button1</li>
        <li>button2</li>
        <li>button13</li>                
    </ul>
</div>

I want them float to the right side of the page

-------------------------------------------------------------------
|                                              button1 button2 button3 |
|                              
|

my css

#login li{
    display: inline;
    text-align: right;
}

It turns out like

-------------------------------------------------------------------
|                                              button3 button2 button1 
|                              
|

I can simply do the following but I don't want to change the order in html.

  <div>
            <ul id='login'>
                <li>button3</li>
                <li>button2</li>
                <li>button11</li>                
            </ul>
  </div>

Is there anyway to fix this problem? Thanks!

Upvotes: 0

Views: 44

Answers (3)

David Thomas
David Thomas

Reputation: 253486

I'd suggest not floating anything, and just using text-align to place the inline-block elements against the right-side of the screen:

#login {
    text-align: right;
}

#login li {
    display: inline-block;
}

JS Fiddle demo.

Upvotes: 2

Oriol
Oriol

Reputation: 12730

This should do it:

#login {
    display: inline-block; /* ul width adapts to its content */
    float: right;          /* clears unused left space */
    overflow: hidden;      /* Or some other clearfix method */
}

#login li {
    display: inline-block; /* permits further link enhancements: height, margin, etc. */
}

Checkout the example.

Upvotes: 2

hammus
hammus

Reputation: 2612

My suggestion:

    #login li{
    display: block;
    float: left;
}

#login {
    margin-left: 50%; //or whatever you like
}

jsFiddle

Upvotes: 1

Related Questions