使用react.js

Question

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

 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

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

 <div class="topContainer">

 </div>

并添加以下css。

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

有关浏览器支持的说明：It's actually safe to use it。 （全球97％支持）