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

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

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

进度跟踪器的每个步骤之间的空间随着屏幕尺寸而缩小。但是，一旦屏幕达到768px，跟踪器就会跳到下一行，即使每个步骤之间仍有空间可以进一步缩小。

我希望整个跟踪器（所有项目）最终一起分解到下一行，但是如何停止这么快呢？在此之前，我需要每一步都进一步缩小。

请在此处观看直播屏幕录像，以解释问题：http://screencast.com/t/nNgDguPEYevc

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

最佳答案

稍微看一下进度栏后面的CSS，我想我可能已经发现了这个问题。
我将屏幕缩小到767像素左右，使其刚好在您提到的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;
}

此媒体查询的屏幕尺寸较小，但是当您比768px屏幕尺寸小1px时，导致它下降的原因是，即使肉眼看起来似乎还有空间-从技术上讲，这并不是因为宽度div现在是视口的全角。

NB：将其添加为评论，因为它并没有真正回答您的问题，更多地帮助您指明正确的方向，但是我缺少这样做的必要代表:)

关于html - 如何阻止无序列表移至下一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39113619/