お互いに並んでいる画像を取得する

Question

私の画像はすべての行で左に斜めに表示されています。どうやって画像を並べることができますか？

ここに私のコードペンへのリンクがあります。 https://codepen.io/centem/pen/NgKEmG

ここは私のコードです。私はブートストラップを使用しています。

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

ありがとうございます。

Answer 1

画像がliより大きく、画像が浮いているため、高さが正しく計算されていません。あなたはclear: both;あなたの李が必要です。

ただ、この追加：、あなたのリチウムにCSSの下に追加してください 李{ マージン

li { 
    clear: both; 
}