---
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, Space } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
const listData = [];
for (let i = 0; i < 23; i++) {
listData.push({
href: 'https://ant.design',
title: `ant design part ${i}`,
avatar: 'https://joeschmoe.io/api/v1/random',
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 }) => (
{React.createElement(icon)}
{text}
);
ReactDOM.render(
{
console.log(page);
},
pageSize: 3,
}}
dataSource={listData}
footer={
ant design footer part
}
renderItem={item => (
,
,
,
]}
extra={
}
>
}
title={{item.title}}
description={item.description}
/>
{item.content}
)}
/>,
mountNode,
);
```