0

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

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

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

我设法实现的唯一事情是让最后一个元素出现在下一行，低于图像的 12:00 PM，或者让它完全消失，我只是无法让它保持原样只显示应该看到的。我试过使用 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);
}

有人可以给我一个提示吗？

4

1 回答 1

2

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

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

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

于 2013-01-22T12:35:58.377 回答