显示具有正确自动高度的内联 li 元素 [关闭]答案

【问题标题】：Display li elements inline with correct automatic height [closed]显示具有正确自动高度的内联 li 元素 [关闭]
【发布时间】：2014-06-30 05:41:51
【问题描述】：

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

【问题讨论】：

你能用相关代码在问题中添加一个jsfiddle吗？
什么是空边？与每个面板相对（例如，如果面板在右侧，则为左侧）？如果面板位于另一侧，第三个面板如何知道上面第一个面板的高度？
^ 这正是我不知道的。更好的解决方案是将每两个面板彼此相对设置。这样徽章就会乱七八糟。我不知道它们是如何被放置在正确的位置上的。我尝试添加 jsfiddle，但有很多 css。我现在试着做一个
喜欢一排和 2 个带有徽章的面板，分别位于一排高度的 25% 和 75% 处？这将是一个很好的视觉解决方案，更紧凑，这将涉及重写此组件的一部分（尽管完全可行），但一个缺点是语义：8 个列表项中的 16 个事件不是列表的正确使用： /
我被要求让它更紧凑，所以我认为它应该可以工作。为了实现这一点，我必须重写哪些部分？

标签： html ruby-on-rails css twitter-bootstrap

【解决方案1】：

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

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


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

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

在li 元素上使用display: table 会很困难。如果您使用的是像 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 文件中将会有很多额外的行。

【讨论】：