HTML/CSS - 移動LI導航欄右上角

我想一個李導航欄移動到頁面的右上角，但是當我在position: absolute;和top: 0;我<li>我得到我的名單，這也是display: inline;所有堆疊在彼此的頂部。他們去我想要的屏幕的一部分，因爲我也是float: right;，但他們不會排隊。HTML/CSS - 移動LI導航欄右上角

任何想法？

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

來源

2014-09-27 Joseph Woods

提供給我們你所有的html plz – 2014-09-27 23:44:24

發佈你的HTML和CSS，你的問題太廣泛了。 – 2014-09-27 23:44:26

嘗試'display：inline-block' – 2014-09-28 00:05:50

李的堆疊在彼此的頂部，因爲你是絕對的將他們放在同一個地方。你想讓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;}

來源

2014-09-28 00:35:55 FarrellScript

這是我的問題，必須將UL設置爲絕對和身體位置。謝謝你，先生。 – 2014-09-28 00:43:59

試試這個http://jsfiddle.net/csdtesting/oe55maf0/2/

新增#header：

#header{ 
    float:right; 
}

和.nav類。也刪除position:absolute;添加＃內容：

#content{ 
position:absolute; 
}

包含的形式。現在結構清晰。

希望這會有所幫助！

來源

2014-09-28 00:36:50

我曾嘗試過這種方式修復它，但問題在於它搞砸了我正在處理的按鈕的所有其他位置。有幫助，但我認爲上述方法更好，我錯過了。謝謝你。 – 2014-09-28 00:45:26

好的，有什麼幫助更好！ :) – 2014-09-28 00:46:47

HTML/CSS - 移動LI導航欄右上角

回答

相關問題