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

Question

我正在尝试创建一个图像列表，其下方有文本。此列表中的所有图像都应该是水平的。我正在使用this fiddle 它工作正常，没有反应。
但我想按如下方式进行 react 。

 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"}]

但是使用react函数，它没有在水平方向上显示。

Answer 1

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

 <div class="topContainer">

 </div>

并添加以下 css。

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

有关浏览器支持的说明:It's actually safe to use it 。 (全局 97% 支持)