How to make the anchor tag take up the full space of the list item it's present inside.
As you can see in the image, my anchor tag containing 'Home' only takes up as much space as the content inside it (the text home). How can I make it occupy the entire space of the list item?
my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<nav class="nav">
<h1>Brand</h1>
<ul class="list">
<li class="list-item"><a href="#">Home</a></li>
<li class="list-item"><a href="#">About</a></li>
<li class="list-item"><a href="#">Services</a></li>
<li class="list-item"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
and my CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav {
background-color: aquamarine;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
}
.list {
display: flex;
list-style: none;
}
.list-item {
padding: 1rem;
}
a {
display: flex;
height: 100%;
text-decoration: none;
}
a:hover {
background-color: rgb(105, 211, 176);
}
2 Replies
