如何将 AntDesign 时间轴对齐到左侧

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