I’m trying to layout this li item (with the logo and name) horizontally but it’s laying it out vertically. I tried applying flex to the specific li item with a class of .profile-button
. But it’s still laying it out vertically. I want the content (in this case the img and the span) to push its li container horizontally.
Here’s the html:
<div class="nav-right">
<div class="nav-right-list">
<ul>
<li><a href="#">Upload</a></li>
<li class="profile-button">
<span> <img src="../SC Recreate/images/2020-04-15 00.32.51.jpg" alt="Profile Photo">
Andrew Scandal V</span></li>
<li><a href="#"><i class="far fa-bell"></i></a></li>
<li><a href="#"><i class="far fa-envelope"></i></a></li>
<li><a href="#"><i class="fas fa-ellipsis-h"></i></a></li>
</ul>
</div>
</div>```
And CSS:
/--------Nav Search---------/
.nav-right img {
border-radius: 50%;
width: 26px;
height: 26px;
}
.nav-right-list ul {
display: flex;
justify-content: space-between;
list-style: none;
font-family: 'Font Awesome 5 Free';
height: 46px;
}
.nav-right-list ul a {
color:white;
}
.nav-right .profile-button {
display: flex;
justify-content: space-around;
}```