0

I am trying to present several images in a row, even though they are all items of a list At the moment my UI looks like this cars in stack instead of having the cars one next to the other.

My css is

li{
    width: 19em;

}
#tripList ul,li {
  list-style: none;
}
#tripList ul {
  overflow: hidden;
  padding: 3em;

}

#tripList ul li span {
  display: inline-block;
  height: 15em;
  width: 19em;
  padding: 1em;
}

and my html code is:

<div id="tripList">
    <ul>
      <% @trips.each do |trip| %>
      <li >
        <span>
            <p class="remove-icon">
              <%= link_to '&times;'.html_safe, trip, method: :delete, data: { confirm: 'Are you sure you want to delete ' + trip.trip_name + '?' } %>
            </p>

          <div class="carImg">
            <p class ="carText"><strong><%= link_to trip.trip_name, trip %></strong></p>
          </div>
          <p>
            <strong>Trippers:</strong> <%= trip.users.collect {|user| user.name }.to_sentence %>
          </p>
        </span>
      </li>
      <% end %>
    </ul>
  </div>

Thank you for your help

4

2 回答 2

3 
#tripList ul li {
  list-style: none;
  display: inline-block;
}

试一试

于 2013-10-27T22:44:35.950 回答
0

list-style: none仍然把物品放在一起，你需要float: left另外的东西。然后在有足够空间时将物品放在旁边。

于 2013-10-27T22:44:04.117 回答