列表樣式：無無法正常工作

我想連續呈現多個圖像，即使他們是一個列表的所有項目在此刻我的UI看起來像這樣 cars in stack 代替具有轎車之一旁邊。列表樣式：無無法正常工作

我的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; 
}

和我的HTML代碼是：

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

謝謝您的幫助

來源

2013-10-27 Quantico

您是否嘗試過讓李的inline-block的？ –

如果你不需要項目符號列表，爲什麼使用項目符號列表元素'ul'？ –

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

給一個去

來源

2013-10-27 22:44:35

當你嘗試過這個並且它工作時，請將它標記爲正確。如果您仍然遇到問題，請告訴我 –

list-style: none還是把下對方的項目，你需要像float: left此外。然後當有足夠的空間時，物品將放在旁邊。

來源

2013-10-27 22:44:04

列表樣式：無無法正常工作

回答

相關問題