railsie railsie - 6 months ago 9
CSS Question

Display a ul horizontally but li vertically rails

I have an app where I am trying to show the featured posts on the homepage. I want the posts to show up horizontally but all the items of the post (the image, the title and the text) to be vertical.

For the CSS I have:

#hentry ul{
list-style: none;
}

#hentry li{
display: inline;
}


And on the homepage I have:

<div id="hentry">

<ul>
<% @featured_posts.each do |post| %>
<li><%= image_tag post.featured_image.url.to_s %></li>
<li><%= post.title %></li>
<li><%= post.text %></li>

<% end %>
</ul>
</div>


Currently the posts show up in a horizontal line but it goes

image 1, title 1, text 1, image 2, title 2, text 2, image 3, title 3, text 3


instead i want

image 1 image 2 image 3
title 1 title 2 title 3
text 1 text 2 text 3


I was thinking maybe adding classes to the li tag might be a solution but I'm not sure if that is the best way.

Answer

the flex model can help:

ul {
  display:flex;/* this is enough */
}
li {
  display:block;/* kills the list-item */
  margin:5px;
  background:tomato;
}
<ul>
  <li>
    <img src="http://dummyimage.com/100x50&text=image_1"/>
    <h1>title 1</h1>
    <p>paragraph 1</p>
</li>
  <li>
    <img src="http://dummyimage.com/100x50&text=image_2"/>
    <h1>title 2</h1>
    <p>paragraph 2</p>
</li>
  <li>
    <img src="http://dummyimage.com/100x50&text=image_3"/>
    <h1>title 3</h1>
    <p>paragraph 3</p>
</li>

or display:table:

ul {
  display:table;
  border-spacing:10px 5px ;
}
li {
  display:table-cell;
  background:tomato;
}
<ul>
  <li>
    <img src="http://dummyimage.com/100x50&text=image_1"/>
    <h1>title 1</h1>
    <p>paragraph 1</p>
</li>
  <li>
    <img src="http://dummyimage.com/100x50&text=image_2"/>
    <h1>title 2</h1>
    <p>paragraph 2</p>
</li>
  <li>
    <img src="http://dummyimage.com/100x50&text=image_3"/>
    <h1>title 3</h1>
    <p>paragraph 3</p>
</li>