獲取排列在彼此之下的圖像

我的圖像在每一行左邊都顯示爲對角線。我怎樣才能將圖像彼此對齊。獲取排列在彼此之下的圖像

這裏是我的codepen的鏈接。 https://codepen.io/centem/pen/NgKEmG

這是我的代碼。我正在使用bootstrap。

<ul class="list-unstyled"> 
      <li>Username<span class="pull-right"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
     <img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li> 
      <li>Username<span class="pull-right"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
      <li>Username<span class="pull-right"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
      <li>Username<span class="pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
      <li>Username<span class="pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
      <li>Username<span class="pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
      <li>Username<span class="pull-right"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"><img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul>

謝謝。

來源

2017-06-02 martinbshp

請在下面添加CSS的李，李 { 保證金：4PX; float：left; 寬度：100％; } 或 li {margin：4px; 明確：均; } –

您的圖像比li大，並且因爲圖像是浮動的，所以它們的高度計算不正確。你需要clear: both;你的李。

只需補充一點：

li { 
    clear: both; 
}

來源

2017-06-02 08:17:11

謝謝！這工作完美。 – martinbshp

獲取排列在彼此之下的圖像

回答

相關問題