使用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%支持)