---
order: 3
title:
zh-CN: 竖排列表样式
en-US: Vertical
---
## zh-CN
通过设置 `itemLayout` 属性为 `vertical` 可实现竖排列表样式。
## en-US
Set the `itemLayout` property to `vertical` to create a vertical list.
```jsx
import { List, Avatar } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
const listData = [];
for (let i = 0; i < 23 ; i + + ) {
listData.push({
href: 'http://ant.design',
title: `ant design part ${i}` ,
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
description:
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
content:
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
});
}
const IconText = ({ icon, text }) => (
< span >
{React.createElement(icon, { style: { marginRight: 8 } })}
{text}
< / span >
);
ReactDOM.render(
< List
itemLayout="vertical"
size="large"
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 3,
}}
dataSource={listData}
footer={
< div >
< b > ant design< / b > footer part
< / div >
}
renderItem={item => (
< List.Item
key={item.title}
actions={[
< IconText icon = {StarOutlined} text = "156" key = "list-vertical-star-o" / > ,
< IconText icon = {LikeOutlined} text = "156" key = "list-vertical-like-o" / > ,
< IconText icon = {MessageOutlined} text = "2" key = "list-vertical-message" / > ,
]}
extra={
< img
width={272}
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
/>
}
>
< List.Item.Meta
avatar={< Avatar src = {item.avatar} / > }
title={< a href = {item.href} > {item.title}< / a > }
description={item.description}
/>
{item.content}
< / List.Item >
)}
/>,
mountNode,
);
```
