在Material-ui中,我想使用
<List>
和<ListItem>
,但让它们水平显示。
最好的方法是什么?
答案 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>