Question

我正在尝试自定义this theme。（在仪表板上向下滚动以查看时间轴示例）我正在尝试使时间轴向上移动一点（以填补空方的空白）。我尝试使用timeline > li:before然后使用display: inline-table但是每个元素仍然占用整个行，面板底部的高度设置渲染按钮不正确。您能否建议我如何自动设置正确的高度并让它们更紧凑？

Answer 1

我能够获得一点空间，但通过将这两行添加到样式表中并不多：

.timeline > li:not(:first-child) > .timeline-panel {
    top: -50px;
}


.timeline > li:not(:first-child) > .timeline-badge {
    top: -35px;
}

然而，这会影响所有时间轴徽章和面板，除了第一个，这很好。但除了第二个孩子外，你所看到的重叠不会被看到。之后行为是相同的：所有时间轴元素在时间轴的另一侧都有空格。

display: table元素上的li会变得艰难。如果您使用的是像SASS这样的CSS处理器，您可以尝试使用mixin并将其组合在一起，如下所示：

@mixin timeline-badge($index) {
    top: ($index * -35);
}

@mixin timeline-panel($index) {
    top: ($index * -35) - 15;
}

.timeline > li:nth-child(1) > .timeline-panel {
    @include timeline-panel(1);
}

.timeline > li:nth-child(2) > .timeline-panel {
    @include timeline-panel(2);
}

// repeat for nth-child 3-???

.timeline > li:nth-child(1) > .timeline-badge {
    @include timeline-badge(1);
}

.timeline > li:nth-child(2) > .timeline-badge {
    @include timeline-badge(2);
}

// repeat for nth-child 3-???

当然，如果你期望50个时间轴元素，你的.scss文件中会有很多额外的行。

使用正确的自动高度显示内嵌li元素

1 个答案: