react中list的用户,多个元素横着排列同一行显示
在react中的List在同一行是一个非常常见的需求,通过指定 style={{display:'flex',justifyContent:'space-around'}}
可以实现该需求。
<List horizontal style={{display:'flex',justifyContent:'space-around'}}>
<List.Item>
<Image avatar src='/images/avatar/small/daniel.jpg' />
<List.Content>
<List.Header as='a'>Daniel Louise</List.Header>
</List.Content>
</List.Item>
<List.Item>
<Image avatar src='/images/avatar/small/stevie.jpg' />
<List.Content>
<List.Header as='a'>Stevie Feliciano</List.Header>
</List.Content>
</List.Item>
<List.Item>
<Image avatar src='/images/avatar/small/elliot.jpg' />
<List.Content>
<List.Header as='a'>Elliot Fu</List.Header>
</List.Content>
</List.Item>
</List>