Member Avatar for kevindougans

Hi guys,

On the top bit with the videos and 3 video previews i can't get the 3 video previews to display on one line.

It's driving me mad, I'm sure its only 1 little line of CSS but can't figure it out.

display:inline; is not working as expected for me.

Cheers,

Kevin

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by kevindougans

Dani AI

Generated

As pointed out, the core problem is that inline elements behave differently than box-level elements: they ignore width/height, sit on the text baseline, and are affected by literal whitespace in the HTML. That is why switching to a display mode that accepts width (and why changing to divs worked temporarily) fixes the layout — but you can keep the semantic list markup and get the same result without extra elements.

Quick checklist to diagnose and stop the wrapping:

  • Reset the UL: remove default margin/padding and list styling so you know the true container width.
  • Check the computed box sizes in the browser inspector (width + padding + border + margin for every LI). If the total >= parent width, items will wrap.
  • Watch the HTML: a newline or space between LI tags becomes a small gap for inline-like boxes. Options to remove that gap: collapse the whitespace, comment the linebreak, set the parent font-size to 0 and restore child font-size, or use a different layout model (floats/flex).
  • Align items predictably by setting vertical alignment to top (inline-level default is baseline).

Examples you can apply instead of changing markup:

Reset + make images behave:

* { box-sizing: border-box; }
ul.video-list { margin:0; padding:0; list-style:none; }
ul.video-list img { display:block; max-width:100%; height:auto; }

Modern alternative (keeps even spacing, responsive):

ul.video-list { display:flex; gap:12px; align-items:flex-start; padding:0; margin:0; list-style:none; }
ul.video-list li  { flex: 0 0 30%; } /* adjust width or use percentages */

Extra tips: if you prefer inline-block, set vertical-align: top on the items to avoid baseline shifting; for old IE quirks there are well-known workarounds. Use the browser dev tools to inspect computed styles and tweak margins/padding until the three previews fit in one row.

Member Avatar for Member #826153

in the class video-preview-block, change display to

display: inline-block;

and apply the same thing to every li.

commented: perfect answer +3
Member Avatar for kevindougans

That is exactly what i was looking for, thanks man. I ended up changing them from a list to divs to get what i wanted but can revert back now that you've suggested this. Cheers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.