如何阻止无序列表移动到下一行答案

【问题标题】：How to stop unordered list from moving to the next line如何阻止无序列表移动到下一行
【发布时间】：2016-08-24 02:47:24
【问题描述】：

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

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

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

在此处观看现场截屏视频来解释问题：http://screencast.com/t/nNgDguPEYevc

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。没有清晰的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
问题： 排序列表过早中断到下一行。 期望的行为： 在此发生之前进一步缩小列表。 最短代码：这很难在现场环境之外正确重现。我已经尽力了：codepen.io/anon/pen/ZONdPP 但我担心它不能正确地代表问题。

标签： html css

【解决方案1】：

看了看进度条后面的 CSS，我想我可能已经发现了这个问题。我将屏幕缩小到 767px 左右，这样它就在你提到的 768px 之下。进度跟踪器在 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 的宽度现在是视口的全宽。

注意：将其添加为评论，因为它并没有真正回答您的问题，更能帮助您指出正确的方向，但是我缺乏这样做所需的代表:)

【讨论】：