Материал-УИ: Как вы сделать горизонтальный список

Question

В Материально-ш, я хотел бы использовать

<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