AntDesign Timeline 如何左对齐

Question

我想在 timeline from the AntDesign library 的两边都有一些文字。

但我也不希望它在页面中间居中。我正在使用如下代码：

<Timeline mode="left">
  <Timeline.Item label="Date 1">Test</Timeline.Item>
  <Timeline.Item label="Date 2">Some information</Timeline.Item>
  <Timeline.Item label="Date 3">More information</Timeline.Item>
</Timeline>

游乐场示例：https://codesandbox.io/s/select-with-search-field-antd-4-16-12-forked-n4c5i?file=/index.js

我愿意接受任何解决方案。有些 CSS 会很棒，但我不想指定我的时间线的宽度，因为它应该使用它需要的任何大小。

Answer 1

它看起来并不那么容易，因为 antd 为此硬编码了样式。这是已知问题（可悲）https://github.com/ant-design/ant-design/issues/26485

目前你可以用自己的css破解它并覆盖 antd 样式。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Timeline, Typography } from "antd";
import "./index.css";

ReactDOM.render(
  <div>
    <Typography.Title level={1}>Header</Typography.Title>
    <Typography.Paragraph>
      Some information, I somehow want the timeline to be exactly below, and not
      centered in the middle of the screen. I was to do this without specifing a
      specific width pixel size.
    </Typography.Paragraph>
    <div className="timeline_container">
      <Timeline mode="left">
        <Timeline.Item label="Date 1">Test</Timeline.Item>
        <Timeline.Item label="Date 2">Some information</Timeline.Item>
        <Timeline.Item label="Date 3">
          More information. Long text...
        </Timeline.Item>
      </Timeline>
    </div>
  </div>,
  document.getElementById("container")
);

div.timeline_container div.ant-timeline-item-label {
  width: calc(10% - 12px) !important;
}

div.timeline_container div.ant-timeline-item-content {
  left: calc(11% - 4px) !important;
  width: calc(89% - 4px) !important;
}

div.timeline_container div.ant-timeline-item-tail,
div.ant-timeline-item-head {
  left: 11% !important;
}

演示：https://codesandbox.io/s/select-with-search-field-antd-4-16-12-forked-8ynww?file=/index.js

AntDesign Timeline 如何左对齐

How to align AntDesign Timeline to the left

javascript

css

less

reactjs

antd