html - 在一行上 float 元素，使最后一个元素溢出

Question

我正在为我的元素做一个时间栏，我想在这里实现的是这样的:

                                                         / <- Screen margin
+-------------------------------------------     -------+\
| +---------+    +---------+    +---------+        +----|/---+
| | 12:00PM |    | 01:00AM |    | 02:00AM |  ....  | 11:|\PM |
| +---------+    +---------+    +---------+        +----|/---+
+-------------------------------------------     -------+\
                                                         /

这些元素实际上是图像(它们有渐变和其他东西)，而不是文本，它们与下一个元素有边距，并且它们被设置为向左浮动，所以一切正常。嗯，差不多。问题是，正如您在“图像”中看到的那样，最后一个可能(我实际上想要这种确切的行为)被剪掉。

我唯一能做到的就是让最后一个元素出现在下一行，图像中午 12:00 以下的某处，或者让它完全消失，我就是无法让它留在原处它只是展示了应该看到的东西。我试过使用 white-space: nowrap 和 overflow: hidden 无济于事。

我当前这些元素的 CSS 样式如下:

#timebar{
    position: absolute;
    width: 6672px;
    height: 33px;
    top: 0px;
    left: 187px;
    background-image: url("../images/timebar.png");
    border-right: 1px black solid;
    z-index: 1;
}
.time_element{
    width: 57px;
    height: 18px;
    margin-left: 221px;
    margin-top: 8px;
    list-style: none;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/* THIS IS FILLED DYNAMICALLY VIA JAVASCRIPT */);
    float: left;
    -webkit-transform: translateZ(0);
}

有人可以给我提示吗？

Answer 1

我建议您将时间元素放在一个内部容器中，其宽度大于时间元素的总宽度。然后将此容器放入您的时间栏中，并将 overflow: hidden 应用于时间栏。这样你就不会体验到时间元素的环绕。

如果时间元素是动态的，则使用 JavaScript 动态计算内部容器的宽度。如果它们的数量是静态的，那么您可以使用 css 应用宽度。

如果您需要显示截止时间元素，请使用 margin-left 滚动内部容器，并在内部容器上设置负值。