Question

我正在为我的项目做一个时间栏，我想在这里实现的是这样的：

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

这些元素实际上是图像（它们有渐变和东西），而不是文本，它们有下一个边距，它们被设置为向左浮动，所以一切都正常。好吧，差不多。问题是，正如你在“图像”中看到的那样，最后一个可能（我实际上想要这个确切的行为）被切断。

我唯一能够实现的目标是让最后一个元素显示在下一行，在图像的下午12:00以下，或者让它完全消失，我无法让它留在哪里它只是展示了应该看到的东西。我尝试过使用white-space：nowrap和overflow：隐藏无济于事。

我目前对这些元素的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滚动内部容器。

在一行上浮动元素，使最后一行只是溢出

1 个答案: