2016-06-08 63 views
3

我正試圖在導航欄上工作。我無法將無序列表放置在導航欄中以將其放置在標題底部。我嘗試使用隱藏的溢出並且還使用填充移動它。仍然沒有運氣。我該怎麼做?在此如何將無序列表放置在標題div內的導航欄div中?

body{ 
 
    \t height:100%; 
 
    \t margin: 0; 
 
    \t background-color:#cccccc; 
 
    } 
 
    #container{ 
 
    \t width:100%; 
 
    \t height:auto; 
 
    } 
 
    #header{ 
 
    \t width:100%; 
 
    \t height:50px; 
 
    \t background-color:white; 
 
    \t margin: auto; 
 
    
 
    } 
 
    .logo{ 
 
    \t font-weight:bold; 
 
    \t width:8%; 
 
    \t height:20px; 
 
    \t float:left; 
 
    \t font-size: 20px; 
 
    } 
 
    .navbar{ 
 
    \t width:75%; 
 
    \t height:40px; 
 
    \t margin: auto; 
 
    \t 
 
    } 
 
    .navbar ul{ 
 
    \t list-style-type: none; 
 
    \t margin:0; 
 
    \t padding:0; 
 
    \t height:20px; 
 
    \t width:18%; 
 
    
 
    } 
 
    .navbar li{ 
 
    \t float:left; 
 
    \t padding-right:10px; 
 
    \t display:block; 
 
    } 
 
    li a{ 
 
    \t 
 
    \t font-size:18px; 
 
    \t font-family:tahoma; 
 
    \t font-weight:italic; 
 
    \t text-decoration:none; 
 
    } 
 
    li a:hover{ 
 
    \t text-decoration:none; 
 
    }
<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>test2</title> 
 
    \t <link rel="stylesheet" href="default.css"> 
 
    </head> 
 
    <body> 
 
    \t <div id="container"> 
 
    \t \t <div id="header"> 
 
    \t \t \t <div class="logo">Hello</div> 
 
    \t \t \t 
 
    \t \t \t <div class="navbar"> 
 
    \t \t \t \t <ul> 
 
    \t \t \t \t \t <li><a href="#news">News</a></li> 
 
    \t \t \t \t \t <li><a href="#about">About</a></li> 
 
    \t \t \t \t \t <li><a href="#contact">Contact</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </body> 
 
    </html> 
 
    
 

+1

除去float:left刪除'寬度:從'.navbar ul' –

+0

「18%'將其定位在底部的標題「 - 所以,你需要顯示下面的標誌? – UncaughtTypeError

+0

您刪除18%寬度解決了問題。謝謝。感謝所有回答的人。 – jonmo1990

回答

1

刪除寬度以下

.navbar ul{ 
    list-style-type: none; 
    margin:0; 
    padding:0; 


} 

demo

0

嘗試此。它應該幫助你。 將導航欄的相對位置和位置ul的絕對位置和頂部48px的位置。

.navbar{ 
width:75%; 
height:40px; 
margin: auto; 
position: relative; 
} 
.navbar ul{ 
list-style-type: none; 
margin:0; 
padding:0; 
height:20px; 
width:18%; 
position:absolute; 
top:48px; 
} 

Codepen

相關問題