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

Ruby

Posted by Dena G
Dena G
441 Points

Horizontal list?

How can I get this to display side by side? I have been playing around in my CSS with no luck. I would like for it to be displayed like this:

Accepted Pending Requested Blocked

Thank you!

<div class="ul">
   <center>
  <strong><h4><%= link_to 'Accepted', user_friendships_path(list:  'accepted') %></strong></h4>
  <strong><h4><%= link_to 'Pending', user_friendships_path(list: 'pending') %></strong></h4>
  <strong><h4><%= link_to 'Requested', user_friendships_path(list: 'requested') %></strong></h4>
  <strong><h4><%= link_to 'Blocked', user_friendships_path(list: 'blocked') %></strong></h4>
  </center>
</div>

CSS

.ul {
    display: inline-block;
}

2 Answers

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

You need to wrap each h4 line in a div and then make the div displayed as inline block. H4 automatically goes to new line once it's closed.

<div class="ul">
   <center>
  <div class="item"><strong><h4><%= link_to 'Accepted', user_friendships_path(list:  'accepted') %></strong></h4></div>
  <div class="item"><strong><h4><%= link_to 'Pending', user_friendships_path(list: 'pending') %></strong></h4></div>
  <div class="item"><strong><h4><%= link_to 'Requested', user_friendships_path(list: 'requested') %></strong></h4></div>
  <div class="item"><strong><h4><%= link_to 'Blocked', user_friendships_path(list: 'blocked') %></strong></h4></div>
  </center>
</div>

.item {
    display: inline-block;
}

This should do the trick.

Dena G
Dena G
441 Points

Awesome! Thanks Maciej.

Calvin Nix
Calvin Nix
43,828 Points
Calvin Nix
Calvin Nix
43,828 Points

Hey Dena,

Have you already tried to use display: inline-block;?

Thanks, Calvin

Dena G
Dena G
441 Points

Hey Calvin,

Yes, unfortunately it just moves the list over to the left and it is still stacked vertically. I just added my CSS in the question as well. Thanks for the response.