如何將列表對齊到右上方？

Question

如何將列表對齊到右上方？ 如何將列表對齊到包含該列表的div的右上方？ 浮動會工作嗎？

HTML

<div id="wall">
<ul>
<li><a href="Login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</div>

的CSS

#wall{
position:relative;
}

#wall ul li {
list-style:none;
margin-right:50px;
position:absolute;
top:0;
right:0;
}

Answer 1

應用position:relative對於父級div。 之后，將以下樣式應用於列表。

.list{
position:absolute;
top:0;
right:0;
}

編輯

感謝Manwal添加了jsfiddle。

演示

Answer 2

是的，使用float: right可以工作。 http://jsfiddle.net/k0r1dj10/1/或http://jsfiddle.net/k0r1dj10/6/ ，且下拉菜單不止一個。

另外可能更好的方法是將外部div設置為position: relative ，將內部div設置為position: absolute和top: 0以及right: 0 。 http://jsfiddle.net/k0r1dj10/3/

要以relative方式使用多個div，您必須使用另一個父div。 這要求您知道寬度tho。 http://jsfiddle.net/k0r1dj10/5/

Answer 3

更改li的順序，然后使用float:right; - 演示

的HTML

<div id="wall">
<ul>
<li><a href="signup.html">Signup</a></li>
<li><a href="Login.html">Login</a></li>
</ul>
</div>

的CSS

#wall{
position:relative;
}

#wall ul li {
list-style:none;
margin-right:50px;
position:relative;
float:right;
}

Answer 4

嘗試這個：

演示

CSS：

        #wall{
position:absolute;
top:0;
right:0;
}

HTML：

<div id="wall">
<ul>
<li><a href="Login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
</div>

Answer 5

.left_box1 {
    width: 50px;
    height: 50px; 
    padding-top: 10px;
    text-align: right;

}