材質的UI：你犯了一個水平列表怎麼辦

Question

材料的UI，我想使用

<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

那麼，你的方法將工作。我的問題是，當你想在手機上查看。柔性方向需要更改爲一列。

如果使用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 

後