Material-ui:如何制作水平列表

时间:2016-03-03 17:24:05

标签: material-ui

在Material-ui中,我想使用

<List><ListItem>,但让它们水平显示。

最好的方法是什么?

5 个答案:

答案 0 :(得分:14)

到目前为止,我有:

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

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

这很有效。寻找潜在的更好的答案/意见。它应该内置吗?

答案 1 :(得分:1)

玩完后

.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

答案 2 :(得分:0)

嗯,你的方法会奏效。我的问题是你想在手机上查看这个。弯曲方向需要更改为列。

如果使用body { font-family: 'Eagle Lake', cursive; } input { width: 40px; text-align: center; } video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; } 会更好,但ListItem组件将为每个项添加div包装器。

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

答案 3 :(得分:0)

尽管这不能回答问题(因为您已经要求使用<List><ListItem>组件),但是Material UI Gridlist对于某些人来说可能是有趣的,如果他们想要更直观的东西。

答案 4 :(得分:0)

这些都不适合我,所以我想我带来了 2021 版本:

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