HTML/CSS-将LI导航栏移动到右上角

Question

我正试图将LI导航栏移动到页面的右上角，但当我的<li>上的position: absolute;和top: 0;时，我得到的列表也是display: inline;，它们都叠在一起。他们转到我想要的屏幕部分，因为我也是float: right;，但他们不会排成一行。

有什么想法吗？

HTML（去掉了HTML、doctype和链接标签，它们就在那里）：

<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
    <li class='nav'><a href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/?gpsrc%3Dogpy0%26tab%3DwX">+You</a></li>
    <li class='nav'><a href="https://www.gmail.com/intl/en/mail/help/about.html">Gmail</a></li>
    <li class='nav'><a href="https://www.google.com/imghp?hl=en&tab=wi&ei=vSQnVJPAK8eIsQTRkYCQDg&ved=0CAQQqi4oAg">Images</a></li>
</ul>

CSS：

#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }
#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }

#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }
ul {
list-style-type: none;
margin: 0;
padding: 0; }
.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }

Answer 1

李被堆叠在一起，因为你绝对要把它们放在同一个地方。您希望使ul处于绝对位置。在你的css中包含下面的代码，为了更好地衡量，你还应该告诉Include它相对于的位置。

ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }
body{position: relative;}

Answer 2

试试这个http://jsfiddle.net/csdtesting/oe55maf0/2/

添加#header:

#header{
    float:right;
}

并从.nav类中删除了position:absolute;。还添加了#content:

#content{
position:absolute;
}

以包含表单。现在结构清晰了。

希望这能有所帮助！