Issue
I'm learning how to make a navbar and I can't align an item properly to the left. here's my html code
.navul {
display: flex;
height: 50px;
background-color: rgb(71, 71, 71);
}
.navli1 {
margin: auto;
}
.navli2 {
margin-left: auto;
}
.navlink {
text-decoration: none;
color: white;
background-color: rgb(0, 0, 0);
padding: 16px 25px;
}
.navlink:hover {
color: rgb(175, 175, 175);
}
ul {
list-style: none;
}<header>
<ul class="navul">
<li class="navli1">
<a class="navlink" href="#">Home</a>
</li>
<li class="navli2">
<a class="navlink" href="#">Logout</a>
</li>
</ul>
</header>here's the result, notice logout item is outside the ul container.
Solution
Remove height of ".navul" and add "display: block" to ".navlink"
.navul {
display: flex;
background-color: rgb(71, 71, 71);
}
.navli1 {
margin: auto;
}
.navli2 {
margin-left: auto;
}
.navlink{
text-decoration: none;
color: white;
background-color: rgb(0, 0, 0);
padding: 16px 25px;
display: block;
}
.navlink:hover {
color: rgb(175, 175, 175);
}
ul {
list-style: none;
}<body>
<header>
<ul class="navul">
<li class="navli1">
<a class="navlink" href="#">Home</a>
</li>
<li class="navli2">
<a class="navlink" href="#">Logout</a>
</li>
</ul>
</header>
</body>Answered By - Aman Sharma
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.