显示内联成员

Question

我正在尝试水平显示我的事件/索引，但我似乎无法让它工作。 Index.html.erb

<ul>
  <% @events.each do |event| %>
      <li>


        <h3>
          <%= link_to event.name, event.flyer.url %>
          <%= event.event_date %> <br/>
          <% if event.preview.exists? then %>
              </h3>
              <%= image_tag event.preview.url(:small) %>
          <% end %>   <br/>
          <%= event.description %>  <br/>

          <%= link_to 'Show', event %>
          <%= link_to 'Edit', edit_event_path(event) %>
          <%= link_to 'Destroy', event, :confirm => 'Are you sure?', :method => 'delete' %>
          </li>
  <% end %>

</ul>

<%= link_to 'New Event', new_event_path %>

风格

<style type="text/css">
    ul
    {
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        text-align: center;
    }
  ul li { display: inline; }
</style>

Answer 1

这里的问题是 display:inline 调整其宽度和高度以适应其内部的元素。

要水平显示元素，您必须固定项目的高度和宽度。
试试这个

ul li {
display: block;
float:left;
width:100px; /* specicy width here */
height:100px; /* specicy height here */
margin-right:10px; /* breathing space */
}