I'm attempting to arrange a series of avatars side by side without wrapping to the next line, creating a layout similar to this:
After exploring Stackoverflow for advice, I came across the following threads:
- How to keep <li> elements on single line in fixed width <ul>?
- Keep list elements in the same line when resizing. CSS liquid layout
I adjusted my <li> elements from display: inline-block to using display: table and display: table-cell, but now I'm facing issues with hiding the overflow completely.
Despite setting overflow-x: hidden on both the <ul> and its parent <div>, the avatars still extend beyond the cog icon as shown in the image. I can't impose a specific height and utilize overflow: hidden due to Twitter Bootstrap dropdowns associated with the avatars. Are there any alternative solutions available?
Thank you in advance for your assistance.