导航栏未响应

我的网页上有一个导航栏，我的网页上也有相关信息。当我删除信息（段落和标题）时，导航栏功能完美。但是，当我放回信息时，导航栏不起作用。为什么网站会这样做？谢谢。导航栏未响应

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

导航栏未响应

回答

相关问题