使用react.js以水平方式显示图像列表

Question

我正在尝试创建一个图像列表，该图像列表的正下方。 此列表中的所有图像应为水平。 我正在使用此小提琴它工作正常，没有任何反应。
但我想按照以下方式进行操作。

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

                                    </figure>
                                ))

其中a.subList处于这种形式

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

但是使用反应功能时，它不会在水平方向上显示。

Answer 1

这实际上是一个样式问题，这是工作中的小提琴 。 我选择了flexbox以水平显示项目，但是您可以选择其他内容。

 <div class="topContainer">

 </div>

并添加以下css。

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

关于浏览器支持的注意事项： 使用它实际上是安全的 。 （全球97％的支持）