Ant Design List.Item.Meta 组件标题和描述横向展示教程

要让 List.Item.Meta 组件的 title 和 description 横向展示，可以使用 CSS 来控制样式。以下是一种实现方式：

在 List.Item.Meta 组件的外部包裹一个 div 元素，例如 <div className='item-meta-wrapper'>...</div>。
在 CSS 中设置 .item-meta-wrapper 的样式为 display: flex;，这样容器内的元素就可以横向排列。
根据需要，可以进一步设置 .item-meta-wrapper 的其他样式，例如 justify-content: space-between; 来让 title 和 description 之间有间距。

完整的代码示例：

import React from 'react';
import { List } from 'antd';
import './App.css';

const data = [
  {
    title: 'Title 1',
    description: 'Description 1'
  },
  {
    title: 'Title 2',
    description: 'Description 2'
  },
  {
    title: 'Title 3',
    description: 'Description 3'
  }
];

function App() {
  return (
    <div className='App'>
      <List
        itemLayout='horizontal'
        dataSource={data}
        renderItem={(item) => (
          <List.Item>
            <div className='item-meta-wrapper'>
              <List.Item.Meta
                title={item.title}
                description={item.description}
              />
            </div>
          </List.Item>
        )}
      />
    </div>
  );
}

export default App;

在 App.css 中添加以下样式：

.item-meta-wrapper {
  display: flex;
  justify-content: space-between;
}

这样就可以让 List.Item.Meta 组件的 title 和 description 横向展示了。