Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Alita Edmonds
Alita Edmonds
6,068 Points
Posted by Alita Edmonds
Alita Edmonds
6,068 Points

Trying to Make Three Images Align Horizontally

What property would I use for making three list item images, that are now vertical, horizontal? Also, could someone tell me how to make the images separate links? Thanks!

3 Answers

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

Would Flexbox be of help here? Looks like you already took the course so I would recommend taking a look at this quick guide: How to Build a Responsive Image Gallery with Flexbox.

brandon downs
brandon downs
11,577 Points
brandon downs
brandon downs
11,577 Points

I agree Flexbox is awesome! Though, I am not happy the way some older browsers render flexbox.

a couple other easy ways to get the images inside of a list to sit horizontally is with floats or display:inline-block

floats:

li {
  float: left;
}

inline-block:

li {
  display: inline-block;
}

and as far as making each image a link.. simply wrap each img in an anchor tag

<ul>
  <li><a href='#'><img src='https://picsum.photos/200/300' /></a></li>
  <li><a href='#'><img src='https://picsum.photos/200/300' /></a></li>
  <li><a href='#'><img src='https://picsum.photos/200/300' /></a></li>

CSS Tricks website also has a great tutorial for Flexbox

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

I'm fairly certain that Flexbox is now the industry standard for anything UI related (like image galleries), and CSS Grid is the same for layout. Floats, like tables before it, are considered hacks.

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you everyone! Thanks Brandon for the image links! I think I tried that before and it didn't work but I am pretty sure I typed something wrong. Thanks Mike for the overview course! Definitely will take that. Thank you so much!