Что не так с моими навигационными ссылками, что поле a: hover не включает отступы?Только содержимое окна меняет цвет. - PullRequest
Новая
       52

Что не так с моими навигационными ссылками, что поле a: hover не включает отступы?Только содержимое окна меняет цвет.

0 голосов
/ 09 декабря 2018

Я пытаюсь создать навигационную панель, но у меня проблемы с 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>

1 Ответ

0 голосов
/ 09 декабря 2018

Я переместил отступ с 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>
...