Question

我的购物车顶部有一个CSS进度跟踪器。它是一个内部无序列表的div。

进度跟踪器的每个步骤之间的空间随着屏幕尺寸缩小。但是一旦屏幕达到768px，跟踪器会突破到下一条线，即使每一步之间仍有空间进一步收缩。

我希望整个跟踪器（所有项目）最终一起分解到下一行，但是我怎么能很快阻止它发生呢？在发生这种情况之前，我需要进一步缩小每一步。

在此处查看实时截屏视频，解释问题：http://screencast.com/t/nNgDguPEYevc

我尝试过更改媒体查询，最小/最大宽度以及不同的显示值，但没有任何效果。

Answer 1

在你的进度条后面看了一下你的css，我想我可能已经发现了这个问题。我将屏幕缩小到大约767px，这样它就在你提到的768px之下。当进度跟踪器在768px处仍然被观察时它是正常的，一旦它低于实际下降时的进度跟踪器。

原因是因为您的某个媒体查询将进度条的包含div设置为100％的宽度：

<div class="x-column x-sm x-3-4">
...
</div>

证明罪魁祸首的媒体查询：

@media (max-width: 767px)
    .x-column.x-sm {
    float: none;
    width: 100%;
    margin-right: 0;
}

这个媒体查询是较小的屏幕尺寸，但是当你比768px的屏幕尺寸小1px时它会导致它下降，因为即使肉眼看起来好像有空间 - 技术上没有因为该div的宽度现在是视口的全宽。

注意：会不会将此作为评论添加，因为它并没有真正回答您的问题，更有助于指明您正确的方向，但我缺少必要的代表：）