MUI - 如何制作水平列表？

Question

在 MUI 中，我想使用：

List 和 ListItem 但让它们水平显示。

最好的方法是什么？

Answer 1

到目前为止我有：

const flexContainer = {
  display: 'flex',
  flexDirection: 'row',
  padding: 0,
};

return (
  <List style={flexContainer}>
    <ListItem
      primaryText="foo1"
      secondaryText="bar1"/>
    <ListItem
      primaryText="foo2"
      secondaryText="bar2"/>
  </List>
);

这行得通。寻找潜在的更好的答案/意见。这应该内置吗？

Answer 2

嗯，你的方法会奏效。我的问题是你什么时候想在手机上查看这个。 flex 方向需要改为列。

如果使用 display: inline-block 会更好，但 ListItem 组件将为每个项目添加一个 div 包装器。

如果 ListItem 实际上使用 containerElement 而不是 div 元素作为顶级包装器会更好。

Answer 3

玩转后

.list-horizontal-display > div {
    display: inline-block;
}

<List className="list-horizontal-display" >
   <ListItem leftAvatar={<Avatar icon={this.props.icon}/>}></ListItem>
   <ListItem leftAvatar={<Avatar icon={this.props.icon}/>}><ListItem>
</List

Answer 4

虽然这没有回答问题（因为您已经要求使用 <List> 和 <ListItem> 组件），但某些人可能会对 Material UI Gridlist 感兴趣，如果他们想要更直观的东西。

Answer 5

None 这些对我有用，所以我带了 2021 版本，我猜：

        <List style={{ display: 'flex', flexDirection: 'row', padding: 0 }}>
            <ListItem button>hehe</ListItem>
            <ListItem button>hehe1</ListItem>
        </List>

Answer 6

在 MUI v5 中，您可以使用 Stack 来显示垂直或水平方向的事物列表。它在引擎盖下使用 flexbox，因此 direction 属性映射到 CSS:

中的旧 flex-direction

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

或者如果您使用的是 List:

<List component={Stack} direction="row">

MUI - 如何制作水平列表？

MUI - How do you make a horizontal List?

css

reactjs

material-ui