Material UI - 如何制作水平列表？

Question

在 Material UI 中，我想使用：List 和 ListItem，但希望它们横向显示。有什么最好的方法吗？

- David

---

使用来自Display MUI的Display Inline。 - Louis Philippe

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>
);

这个方法有效。寻求更好的答案/意见。 是否应该内置？

- David

---

这个很好用。我仍然惊讶于他们没有内置属性来实现这一点。 - Dave Howson

在暂停一段时间后重新开始涉足这个领域，下面由@NearHuscarl提供的Stack和direction解决方案几乎肯定是您要寻找的。我会尝试将其标记为正确答案！ - David

Answer 2

在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">

- NearHuscarl

---

那么如果您选择使用List来指定所选项目呢？ - Kasir Barati

这不是一个可访问的解决方案，因为 Stack 在其根部包含了 div 元素，而 div 元素不应该包裹 li 元素。相反，应该使用 ul 元素。在这一部分上进行可访问性测试将会失败。 - Lori

Answer 3

我试过这些方法都没用，所以我带来了我猜是2021版本的：

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

- Júlio Almeida

---

抱歉，我真的看不出有什么区别？ - David

唯一的区别实际上在于属性上，这些属性在以下解决方案中已经过时。 - Júlio Almeida

Answer 4

玩耍一段时间后

.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

- user8044172

Answer 5

尽管这并没有回答问题（因为您要求使用<List>和<ListItem>组件），但Material UI Gridlist可能会引起某些人的兴趣，如果他们想要更多的视觉效果。

- Craig Myles

Answer 6

好的，您的方法可行。我的问题是当您想在移动设备上查看时，flex方向需要更改为列。

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

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

- user8044172