Question

当我们将鼠标悬停在某个链接上时，我试图让导航栏完全突出显示，但它目前只能水平工作。我认为它的确很小，我做错了，并且已经尝试了四个小时。这是我的代码：

＆＃13;

    html, body { 
    
    /*require html and body 100% height and width to allow other child elements to use percentages*/
    
    	height: 100%; 
    	width: 100%; 
    	margin: 0;
    
    }
    
    a {
    	text-decoration: none;
    	display: block;
    	color: black;
    }
    
    li {
    	list-style: none;
    }
    
    
    div{
    	margin-left: 2.5%;
    	margin-right: 2.5%;
    	margin-top: 1%;
    	border: 1px solid black;
    }
    
    .content_section{
    	height: 150%;
    	margin-bottom: 1%;
    }
    
    #footer{
    	height: 25%;
    	margin-bottom: 1%;
    }
    
    #banner{
    	margin-top: 2.5%;
    	height: 15%;
    	position: relative;
    }
    
    #banner img{
    	width: 100%;
    	height: 100%;
    }
    
    #navbar{
    	padding: 0;
    	height: 5%;
    	

    text-align: center;
    	position: relative;
    	background-color: #FFCB3D;
    }

    #navbar li a {
    	display: block;
      text-align: center;
      text-decoration: none;
      width: 20%;
      height: 100%;
      float: left;
    }
    
    #navbar ul a:hover{
    	height: 100%;
    	background-color: #FFF17C;
    }

＆＃13;

<!DOCTYPE html>
<html>

	<head>
		<title>Sample Site</title>
		<link rel="stylesheet" type="text/css" href="css.css">
	</head>

	<body>
		<div id="banner">
			<img src="resources/images/banner-image.png">		
		</div>

		<div id="navbar">
			<ul id="navbar">
				<li><a href="#">Page A</a></li>
				<li><a href="#">Page B</a></li>
				<li><a href="#">Page C</a></li>
				<li><a href="#">Page D</a></li>
				<li><a href="#">Page E</a></li>
			</ul>
		</div>

		<div class="content_section">
		</div>

		<div id="footer">
		</div>
	</body>
</html>

＆＃13;

Answer 1

我会让ul一个display: flex父母从li中创建一行，删除height上的#navbar所以它根据内容流动，删除ul的默认margin，然后在flex-grow: 1上设置li （或简称flex: 1 0 0），以便他们伸展以均匀填充父级，然后将垂直padding应用于li > a并删除height }和float s。

＆＃13;

    html, body { 
    
    /*require html and body 100% height and width to allow other child elements to use percentages*/
    
    	height: 100%; 
    	width: 100%; 
    	margin: 0;
    
    }
    
    a {
    	text-decoration: none;
    	display: block;
    	color: black;
    }
    
    li {
    	list-style: none;
    }
    
    
    div{
    	margin-left: 2.5%;
    	margin-right: 2.5%;
    	margin-top: 1%;
    	border: 1px solid black;
    }
    
    .content_section{
    	height: 150%;
    	margin-bottom: 1%;
    }
    
    #footer{
    	height: 25%;
    	margin-bottom: 1%;
    }
    
    #banner{
    	margin-top: 2.5%;
    	height: 15%;
    	position: relative;
    }
    
    #banner img{
    	width: 100%;
    	height: 100%;
    }
    
    #navbar{
    	padding: 0;          
    	position: relative;
    	background-color: #FFCB3D;
      text-align: center;
    }
    ul#navbar {
      display: flex;
      margin: 0;
    }
    #navbar li { 
      flex: 1 0 0;
    }

    #navbar li a {
    	display: block;
      text-decoration: none;
      padding: 1em 0;
    }
    
    #navbar ul a:hover{
    	background-color: #FFF17C;
    }

＆＃13;

<!DOCTYPE html>
<html>

	<head>
		<title>Sample Site</title>
		<link rel="stylesheet" type="text/css" href="css.css">
	</head>

	<body>
		<div id="banner">
			<img src="resources/images/banner-image.png">		
		</div>

		<div id="navbar">
			<ul id="navbar">
				<li><a href="#">Page A</a></li>
				<li><a href="#">Page B</a></li>
				<li><a href="#">Page C</a></li>
				<li><a href="#">Page D</a></li>
				<li><a href="#">Page E</a></li>
			</ul>
		</div>

		<div class="content_section">
		</div>

		<div id="footer">
		</div>
	</body>
</html>

＆＃13;

HTML / CSS帮助使链接悬停填充整个导航栏

1 个答案: