Question

我正在CSS中创建一个时间轴，如果内容太长，该时间轴会溢出。我在时间线的上方和下方都有文字，每个时间段等于文字的宽度。

我同时玩过absolute和relative的定位。

absolute position的问题是我无法为文本设置每个段的宽度，这会在视口的宽度小于累积文本的宽度时引起问题。

relative position的问题在于文本和句段全部集中在一个整体的中心，这不能使句段完美地居中。

在此之前，我使用了margin-top和margin-bottom并将该段设置为父元素。问题在于，由于元素的高度与段而不是子文本相关联，因此现在必须手动设置我的高度。

<div class="timeline">
    <div class="segment">
        <h1>title</h1>
        <div class="line"></div>
        <ul>
            <li>list</li>
            ...
        </ul>
    </div>
    ...
</div>

.timeline
    display                     flex
    flex-wrap                   nowrap
    align-items                 center
    width                       100%
    .segment
        flex                    auto
        white-space             nowrap
        display                 flex
        flex-direction          column
        .line
            height              0.1rem
            background-color    black

我希望：


    x      x      x
⬤⸻⬤⸻⬤⸻⬤
  y      y      y
         y

但是我得到了这个（大致而言）：


    x       x      x
⬤______⬤⸻⬤______⬤
  y       y       y
          y

Answer 1

我仍然不能100％地确定代码的设置方式，但我认为问题在于列表项不均。当您在ul元素中使用显示柔韧性的项目时，可能会发生这种情况。

我将.timeline的显示从display: flex更改为display: inline-block，这对于显示不均匀列表更安全，而.segment的显示也从{{1} }到display: flex。

对于要显示display: inline-flex但仍保持内嵌的项目，您还应该考虑使用inline-flex。

请参见下面的摘录。

flex

.timeline{
    display:                     inline-block;
    align-items:                 center;
    width:                       100%;
}
.segment{
        width:200px;
        display: inline-flex;
        white-space:             nowrap;
        flex-direction:          column;
}

.line{
            height:              0.1rem;
            background-color:    black;   
}

.timeline > div:nth-child(even) > .list {
  position: absolute;
}

/* UNCOMMENT BELOW TO SEE ORIGINAL CSS*/
/* .timeline{
    display:                     flex;
    flex-wrap:                   nowrap;
    align-items:                 center;
    width:                       100%;
}
.segment{
        flex:                    auto;
        white-space:             nowrap;
        display:                 flex;
        flex-direction:          column;
}
.line{
            height:              0.1rem;
            background-color:    black;   
} */

如您所见，我添加了

<div class="timeline">
    <div class="segment">
        <h1>title</h1>
        <div class="line"></div>
        <ul class='list'>
          <li>x</li>
          <li>x</li>
        </ul>
    </div>
    <div class="segment">
        <h1>title</h1>
        <div class="line"></div>
        <ul class='list'>
          <li>y</li>
          <li>y</li>
          <li>y</li>
        </ul>
    </div>
  <div class="segment">
        <h1>title</h1>
        <div class="line"></div>
        <ul class='list'>
          <li>y</li>
         
        </ul>
    </div>
</div>

为您提供快速解决方案，以便在行上方显示第二个列表项，而在下面保留奇数个列表。

由于您没有提供所有代码，因此无法完全按照用例进行复制，但是这种现象是相同的，这将有助于您实现所需的功能。

Answer 2

您可以做的一件事就是设置align-items: start;。如果需要将所有垂直居中放置在容器中，则可以将所有内容包装在div中，然后将其居中。

如果需要使用不同大小的标题，则可以设置固定的line-height和margin。

.timeline {
  display: flex;
  flex-wrap: nowrap;
  align-items: start;
  width: 100%;
}

.segment {
  flex: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}

.segment h1{
  line-height: 38px;
  margin: 21px 0;
}

.line {
  height: 0.1rem;
  background-color: black;
}

<div class="timeline">
    <div class="segment">
        <h1>title</h1>
        <div class="line"></div>
        <ul>
            <li>list</li>
        </ul>
    </div>
    <div class="segment">
        <h1>title</h1>
        <div class="line"></div>
        <ul>
            <li>list</li>
            <li>list</li>
        </ul>
    </div>
    <div class="segment">
        <h1 style="font-size: 20px;">title</h1>
        <div class="line"></div>
        <ul>
            <li>list</li>
            <li>list</li>
            <li>list</li>
        </ul>
    </div>
</div>

在保持线条居中的同时，如何在线条上方和下方对齐文本？

2 个答案: