react.jsを使用した水平方向の画像のリスト

Question

私はテキストのすぐ下にある画像のリストを作成しようとしています。このリストのすべての画像は水平でなければなりません。私は使用していますthis fiddle 反応なしで正常に動作しています。
しかし、私は次のように反応させたいと思います。

a.subListこのフォーム

[{"imageUrl":"/acb","name":"cvb"},{"imageUrl":"/asdf","name":"cvbnm"}] 

しかし、それは水平方向に表示されていない機能を使用して反応している

a.subList.map((b) => (
            <figure id="figure"> 
             <ul> 
              <li> 
               <img src={b.imageUrl} /> 
                <figcaption>{b.name}</figcaption> 
              </li> 
             </ul> 

            </figure> 
           )) 

。

Answer 1

実際にはスタイリングの問題です。ここでは、作業はfiddleです。 項目を横に表示するにはflexboxを選択しましたが、他の項目を選択できます。

<div class="topContainer"> 

</div> 

次のCSSを追加してください。

.topContainer{ 
    display: flex; 
    flex-direction: row; 
} 

ブラウザのサポートに関するメモ：It's actually safe to use it （全世界で97％のサポート）