Question

我有一个应用程序，我试图在主页上显示精选帖子。我希望帖子水平显示，但帖子的所有项目（图像，标题和文本）都是垂直的。

对于CSS我有：

#hentry ul{
  list-style: none;
}

#hentry li{
  display: inline;
}

在主页上我有：

<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>

目前帖子显示在水平线上但是

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

我想要

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

我在考虑在li标签上添加类可能是一个解决方案，但我不确定这是否是最佳方式。

Answer 1

flex模型可以提供帮助：

＆＃13;

ul {
  display:flex;/* this is enough */
}
li {
  display:block;/* kills the list-item */
  margin:5px;
  background:tomato;
}

＆＃13;

<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>

＆＃13;

或display：table：

＆＃13;

ul {
  display:table;
  border-spacing:10px 5px ;
}
li {
  display:table-cell;
  background:tomato;
}

＆＃13;

<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>

＆＃13;

水平显示ul但垂直轨道垂直

1 个答案: