導航欄未響應

我的網頁上有一個導航欄，我的網頁上也有相關信息。當我刪除信息（段落和標題）時，導航欄功能完美。但是，當我放回信息時，導航欄不起作用。爲什麼網站會這樣做？謝謝。導航欄未響應

JSFiddle - 隨着信息

JSFIDDLE - 如果沒有信息

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <title>CSGOMarble</title> 
</head> 
<body> 
<h3 style="float: right; margin-right: 25px;"><a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a></h3> 

<div class="logo"> 
    <img src="logo.png" alt="LOGO" height="60px" width="200px"> 
</div> 

<hr> 

<div class="navbar"> 
    <ul> 
     <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li> 
     <li><a href="coinflip.html">COINFLIP</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 
<div class="container"> 
    <h2>CSGOMarble</h2> 
    <u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u> 
    <p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p> 
</div> 
</body> 
</html>

CSS：

body { 
font-family: Arial, Verdana, sans-serif; 
background-color: white; 
} 
.logo { 
margin-left: 25px; 
} 
.navbar { 
margin-top: 50px; 
margin-left: 25px; 
padding: 0; 
font-size: 15px; 
float: left; 
display: inline-block; 
} 
.container { 
    width: 100%; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    position: fixed; 
    text-align: center; 
} 
a { 
text-decoration: none; 
color: black; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 175px; 
    background-color: #f1f1f1; 
    border: 2px solid #555; 
} 

li a { 
    display: block; 
    color: #000; 
    padding: 12px 0 12px 0; 
    text-decoration: none; 
} 
li a:hover { 
    background-color: #555; 
    color: white; 
} 
li { 
    text-align: center; 
    border-bottom: 1px solid #555; 
} 

li:last-child { 
    border-bottom: none; 
}

來源

2016-04-06 Senoj

這種類型的代碼非常簡單，通常效果很好。迪你檢查缺少大括號或關閉標籤？什麼是

標籤，並且它是否有結束標籤？ – Sparky256

您已給出位置：固定用於通過導航欄的容器。要麼刪除位置：固定或使用margin-top .. –

當添加位置固定到容器中，則可以在兩個添加z索引。容器和導航的div中，只要你想用自己的方式解決這個問題。

.navbar { 
    margin-top: 50px; 
    margin-left: 25px; 
    padding: 0; 
    font-size: 15px; 
    float: left; 
    display: inline-block; 
    z-index: 2; 
    position: fixed; 
} 

.container { 
    width: 100%; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    position: fixed; 
    text-align: center; 
    z-index: 1; 
}

更改這個CSS希望它可以幫助

來源

2016-04-06 04:14:26 hemanjosko

謝謝你。 – Senoj

，除非你想要的元素不會滾動不要使用position:fixed與頁面。這個css設置對於仍然固定在屏幕/窗口中並始終可見的標題（navbars）非常有用。

與position:fixed類似的另一個是position:absolute，除了在用戶向下滾動頁面時向上滾動。然而，絕對和固定都允許您使用topleftrightbottom將元素精確定位在屏幕上。（一個提示：父元素必須是position:absolute或position:relative（相對共同地）

變化position:fixed到position:relative爲<div class="container">

來源

2016-04-06 04:14:12 gibberish

導航欄未響應

回答

相關問題