Question

我正在尝试将LI Nav栏移动到页面的右上角，但是当我position: absolute;和top: 0; <li>时，我的列表也是{{} 1}}全部堆叠在一起。它们会转到我想要的屏幕部分，因为我也是display: inline;但它们不会排成一行。

有什么想法吗？

HTML（遗漏了html和doctype以及链接标记，它们就在那里）：

float: right;

CSS：

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

Answer 1

li's堆叠在一起，因为你绝对将它们放在同一个地方。你想让ul绝对定位。在css中包含下面的代码，为了更好的衡量，你还应该告诉它包含相对于它的位置。

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;
}

包含表单。现在结构很清楚。

希望这有帮助！

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

2 个答案: