Показать участников Inline

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 */ 
}