[英]list-style: none is not working well
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 我试图连续显示几张图像,即使它们都是列表中的所有项目。此刻,我的UI看起来像这样
instead of having the cars one next to the other.
而不是让汽车彼此相邻。
My css is 我的CSS是
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: 而我的html代码是:
<div id="tripList">
<ul>
<% @trips.each do |trip| %>
<li >
<span>
<p class="remove-icon">
<%= link_to '×'.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 谢谢您的帮助
#tripList ul li {
list-style: none;
display: inline-block;
}
Give that a go 放手
list-style: none
still puts the items under each other, you need something like float: left
in addition. list-style: none
仍然list-style: none
东西互相放置,您需要像float: left
这样的东西。 Then the items will be put beside when there is enough space. 当有足够的空间时,这些物品将被放置在旁边。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.