Question

我对ul列表有疑问

我有类似

的东西

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

我希望它们浮动到页面的右侧

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

我的css

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

结果就像

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

我可以简单地执行以下操作，但我不想更改html中的顺序。

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

有没有解决这个问题？谢谢！

Answer 1

我建议不要浮动任何内容，只需使用text-align将inline-block元素放在屏幕右侧：

#login {
    text-align: right;
}

#login li {
    display: inline-block;
}

JS Fiddle demo

Answer 2

这应该这样做：

#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.

Answer 3

我的建议：

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

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

jsFiddle

我的ul列表浮动问题

3 个答案: