CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
denislexic
denislexic

Reputation: 11342

Align <li> elements but hide overflow

I'm trying to align a bunch of avatars next to each other and not go to the line to look like something like this:

enter image description here

So I followed some fellow questions in Stackoverflow:

I changed my <li> elements from display: inline-block to the display: table and display: table-cell but now I can't hide the overflow whatsoever.

As you can see in the picture, avatars overflow on the right after the cog icon... I did overflow-x: hidden on the <ul> and even the parent <div> but no solution.

Unfortunately, I can't set a hard height and do overflow: hidden because the avatars have Twitter Bootstrap drop downs...Any other solutions?

Thanks in advance for your help.

Upvotes: 0

Views: 83

Answers (1)

SW4
SW4

Reputation: 71150

So long as the li are using display:inline-block you simply need to set white-space: nowrap; on the ul

Demo Fiddle

You may want to augment this with width:100%;overflow:hidden; on the ul

Demo Fiddle

Upvotes: 2

Related Questions