How to make li item contents horizontal

HTML-CSS
1

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;
}```

Screenshot 2020-04-18 10.46.44

2

Make your li element in the nav bar to be inline-block
.nav-right-list li {
display:inline-block;
}

1 Like
3

@ZeeCkel Thanks but that didn’t work. The specific list item is still being laid out vertically: Screenshot 2020-04-18 11.15.37 Screenshot 2020-04-18 11.15.44

4

You have the image inside the span so only the span is a flex item. Make the li the parent of both the span and the img and set it to be a flexbox container.

<li class="profile-button">
  <img src="../SC Recreate/images/2020-04-15 00.32.51.jpg" alt="Profile Photo">
  <span>
    Andrew Scandal V
  </span>
</li>
1 Like