Javascript 使用样式化组件响应水平列表

我试图在React with Styled Components中创建一个水平滚动列表。每个列表项都是一个相当复杂的组件

我试过了，但都没有成功。每次，我要么得到一个垂直列表，要么得到一个2x2网格

const List=styled.ul`
列表样式：无；
溢出-x：自动；
`;
const ListItem=styled.li`
显示：内联块；
`;
导出默认类面板列表扩展组件{
render（）{
const listItems=this.props.matchups.map（m=>(
{}
));
返回{listItems}；
}
}

对于内联块，您可以通过设置

空白：nowrap在列表中。见示例：

还有其他几种方法可以解决此问题。
为什么必须使用UL和LI？似乎您正在删除UL的所有属性。为什么不将display:flex用于父容器（此处）？