时间戳

首页 > 解决方案 > 我的 a:hover 框不包含填充的导航链接有什么问题？只有内容框改变颜色。

css - 我的 a:hover 框不包含填充的导航链接有什么问题？只有内容框改变颜色。

问题描述

我试图制作一个导航栏，但我在使用 a:hover 时遇到了问题。只有内容框会改变颜色，但我希望它是内容框和它周围的填充区域。怎么了？

我已经尝试了一切，但由于某种原因，只有内容框发生了变化，这看起来很糟糕。我试图得到一个完整的盒子来改变颜色。我觉得自己像个白痴，有人可以看看这个并告诉我我做错了什么吗？

#container {
 	box-sizing: content-box;
}

body {
	font-family: "avenir light", sans-serif;
}

#container{
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.navbar-links {
	max-width: 1090px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}

.navbar-links a:hover {
	background: #831517;
	color: #FFFFFF;
}

.navbar-links a {
	color: #444444;
	text-decoration: none;
	text-align: center;
}

.navbar ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-decoration: none;
	width: 100%;
}


ul li {
	list-style: none;
	display: inline-block;
	margin-top: 50px;
	padding: 20px 20px;
}

.navbar {
	background-color: #FFFFFF;
	overflow: hidden;
	height: 91px;
}

#number {
	float: right;
	padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
	
	<link rel="stylesheet" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Brushworks NW Inc.</title>
</head>
<body>
	<nav class="navbar">
		<ul class="navbar-links">
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT US</a></li>
			<li><a href="#">SERVICES</a></li>
			<li><a href="#">GALLERY</a></li>
			<li><a href="#">CONTACT US</a></li>
			<li id="number"><a href="#">(360)679-4444</a></li>
		</ul>
	</nav>

标签： cssnavigationhovernavbarnav

解决方案

我已将填充从移动li到a

查看工作代码：

#container {
 	box-sizing: content-box;
}

body {
	font-family: "avenir light", sans-serif;
}

#container{
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.navbar-links {
	max-width: 1090px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}

.navbar-links a:hover {
	background: #831517;
	color: #FFFFFF;
}

.navbar-links a {
	color: #444444;
	text-decoration: none;
	text-align: center;
	padding: 20px;
}

.navbar ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-decoration: none;
	width: 100%;
}


ul li {
	list-style: none;
	display: inline-block;
	margin-top: 50px;
}

.navbar {
	background-color: #FFFFFF;
	overflow: hidden;
	height: 91px;
}

#number {
	float: right;
	padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
	
	<link rel="stylesheet" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Brushworks NW Inc.</title>
</head>
<body>
	<nav class="navbar">
		<ul class="navbar-links">
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT US</a></li>
			<li><a href="#">SERVICES</a></li>
			<li><a href="#">GALLERY</a></li>
			<li><a href="#">CONTACT US</a></li>
			<li id="number"><a href="#">(360)679-4444</a></li>
		</ul>
	</nav>

推荐阅读