html - 如何阻止无序列表移动到下一行

Question

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

在此处查看实时 View :http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/

进度跟踪器每一步之间的空间随着屏幕尺寸缩小。但是一旦屏幕达到 768 像素，跟踪器就会中断到下一行，即使每一步之间仍有进一步缩小的空间。

我希望整个跟踪器(所有元素)最终一起分解到下一行，但我怎样才能阻止它这么快发生呢？在这种情况发生之前，我需要每一步都进一步缩小。

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

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

Answer 1

稍微查看一下进度条后面的 CSS，我想我可能已经发现了这个问题。我将屏幕缩小到 767px 左右，所以它刚好低于你提到的 768px。进度跟踪器在以 768 像素仍然被查看时很好，一旦它低于 768 像素，它就会真正下降。

这是因为您的一个媒体查询将进度条的包含 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;
}

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

注意:本来可以将此添加为评论，因为它并没有真正回答您的问题，更多地帮助您指出正确的方向，但是我缺少这样做所需的代表:)