Question

我是HTML / CSS的新手。我正在用pushbottns（锚定）制作一个网站。我已经使一些按钮正常工作了。我现在正在制作一个带有一些锚点的导航栏。当我打开网站时，我可以看到那些锚点，但无法单击它们。我的其他按钮没有问题，所以我不知道如何找到问题？可能与导航ID有关吗？

        .menubalk{
    	padding:25px;
    
    }
    .menubalk ul{
    	list-style:none;
    	display:inline;
    	margin-left:0;
    	padding:375px;
    }
    .menubalk li{
    	display:inline;
    }
    
    .menubalk a{
    	color:black;
    	background-color:#0072BB;
    	text-transform:uppercase;
    	font-size: 12px;
    	font-weight:bold;
    	padding: 20px;
    	border-radius:5px;
    }
    .content{
    	background-color:#0072BB;
    	border-radius:25px 25px 25px 25px;
    	margin-left:175px;
    	padding:25px;
    
    }
    p,h2,img{
    	margin:0;
    }
    
    nav{
    	background-color:#0072BB;
    	float:left;
    	width:150px;
    	border:10px solid white;
    	border-radius:25px 25px 25px 25px;
    }
    #wrapper{
    	margin:0px auto 0px auto;
    	min-width:500px;
    	max-width:1800px;
    
    }

	<div id="wrapper">
		<header>
			<div class="logo">
				<img src="../Afbeeldingen/QualitySigns.png" alt="logo Quality Signs" height="300" width="384">
				<div class="logotekst">
				<p>				
				Signalisatie van hoge kwaliteit
				</p>
				</div>
			</div>	<!--einde logo-->
			<div class="menubalk">	<!-- begin menubalk-->
				<ul>
					<li><a href="#">Projectpagina</a></li>
					<li><a href="#">CV-pagina</a></li>
					<li><a href="#">Extra link</a></li>
				</ul>
			</div><!-- einde menubalk-->
		</header>		
		<nav>
			<ul>
				<li><a href="index.html">Over ons</a></li>
				<li><a href="#">Productie</a></li>
				<li><a href="#">Verhuur</a></li>
				<li><a href="#">Plaatsing</a></li>
			</ul>	
		</nav>

我希望有人可以帮助我解决这个问题。谢谢大家！

Answer 1

.menubalk ul选择器上的填充为375px，导致元素与下面的链接重叠。

.menubalk ul{
    list-style:none;
    display:inline;
    margin-left:0;
    padding:375px;
}

有关工作示例，请参见下文

.menubalk{
    padding:25px;

}
.menubalk ul{
    list-style:none;
    display:inline;
    margin-left:0;
    padding:0px;
}
.menubalk li{
    display:inline;
}

.menubalk a{
    color:black;
    background-color:#0072BB;
    text-transform:uppercase;
    font-size: 12px;
    font-weight:bold;
    padding: 20px;
    border-radius:5px;
}
.content{
    background-color:#0072BB;
    border-radius:25px 25px 25px 25px;
    margin-left:175px;
    padding:25px;

}
p,h2,img{
    margin:0;
}

nav{
    background-color:#0072BB;
    float:left;
    width:150px;
    border:10px solid white;
    border-radius:25px 25px 25px 25px;
}
#wrapper{
    margin:0px auto 0px auto;
    min-width:500px;
    max-width:1800px;

}

<div id="wrapper">
    <header>
        <div class="logo">
            <img src="../Afbeeldingen/QualitySigns.png" alt="logo Quality Signs" height="300" width="384">
            <div class="logotekst">
            <p>             
            Signalisatie van hoge kwaliteit
            </p>
            </div>
        </div>  <!--einde logo-->
        <div class="menubalk">  <!-- begin menubalk-->
            <ul>
                <li><a href="#">Projectpagina</a></li>
                <li><a href="#">CV-pagina</a></li>
                <li><a href="#">Extra link</a></li>
            </ul>
        </div><!-- einde menubalk-->
    </header>       
    <nav>
        <ul>
            <li><a href="index.html">Over ons</a></li>
            <li><a href="#">Productie</a></li>
            <li><a href="#">Verhuur</a></li>
            <li><a href="#">Plaatsing</a></li>
        </ul>   
    </nav>

Answer 2

内森·弗里斯的答案是正确的。问题是填充，但是我假设您正在使用填充来尝试使顶部导航栏居中。

这是您的样式稍有改进的版本，其中包含工作链接和居中的导航栏！请注意，由于我使用百分比和自动边距，因此当您调整浏览器窗口的大小时，导航栏仍居中。

祝你好运！

    .menubalk {
      text-align: center;
      width: 100%;
      margin: 5% auto auto auto;
    }

    .menubalk ul{
    	list-style:none;
    }

    .menubalk li{
    	display:inline;
    }
    
    .menubalk a{
        color:black;
    	background-color:#0072BB;
    	text-transform:uppercase;
    	font-size: 12px;
    	font-weight:bold;
    	padding: 20px;
    	border-radius:5px;
    }

    .content{
    	background-color:#0072BB;
    	border-radius:25px 25px 25px 25px;
    	margin-left:175px;
    	padding:25px;
    
    }

    p,h2,img{
    	margin:0;
    }
    
    nav{
    	background-color:#0072BB;
    	float:left;
    	width:150px;
    	border:10px solid white;
    	border-radius:25px 25px 25px 25px;
    }

	<div id="wrapper">
		<header>
			<div class="logo">
				<img src="../Afbeeldingen/QualitySigns.png" alt="logo Quality Signs" height="300" width="384">
				<div class="logotekst">
				<p>				
				Signalisatie van hoge kwaliteit
				</p>
				</div>
			</div>	<!--einde logo-->
			<div class="menubalk">	<!-- begin menubalk-->
				<ul>
					<li><a href="#">Projectpagina</a></li>
					<li><a href="#">CV-pagina</a></li>
					<li><a href="#">Extra link</a></li>
				</ul>
			</div><!-- einde menubalk-->
		</header>		
		<nav>
			<ul>
				<li><a href="index.html">Over ons</a></li>
				<li><a href="#">Productie</a></li>
				<li><a href="#">Verhuur</a></li>
				<li><a href="#">Plaatsing</a></li>
			</ul>	
		</nav>

不能单击导航栏中的链接

2 个答案: