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

我的购物车顶部有一个CSS进度跟踪器。这是一个内部有无序列表的div。如何阻止无序列表移动到下一行

在这里看到实时取景：http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/

进度跟踪的每一步之间的空间逐渐缩小屏幕尺寸。但是一旦屏幕点击768px，跟踪器就会闯入下一行，即使每步之间仍有空间进一步缩小。

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

看到这里现场截屏说明问题：http://screencast.com/t/nNgDguPEYevc

我试着改变媒体的质疑，最小/最大宽度和不同的显示值，但没有任何工程。

2016-08-24 bennygill

问题寻求帮助调试（” **为什么不是这个代码工作？**“）必须包含所需的行为，特定的问题或错误以及必要的最短代码在问题本身**中重现**。没有明确问题声明**的问题对其他读者无用。请参阅：[如何创建最小，完成和可验证示例]（http://stackoverflow.com/help/mcve）。 – j08691

**问题：**有序列表过早地切断到下一行。 **期望的行为：**在发生这种情况之前进一步收缩列表。 **最短代码：**在现场环境以外很难正确重现。我在这里尽力：http://codepen.io/anon/pen/ZONdPP但我担心它不能正确表示问题。 – bennygill

看了一下你的进度条背后的CSS，我想我可能已经发现了这个问题。我将屏幕缩小到767px左右，这样它就在您提到的768px的下方。进度追踪器在768px时仍然可以看到，但一旦它低于这个值，实际上它就会下降。

这样做的原因是因为你的媒体查询的一个设置你的进度条中包含div至100％的宽度：

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

：

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

被证明罪魁祸首媒体查询

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

NB：将已经添加了这是一个评论，因为它是不是真的回答你的问题更多的帮助一点，你在正确的方向，但是我缺少必要的代表这样做:)

来源

2016-08-24 08:38:43

感谢这使我走上了正轨 – bennygill

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

回答

相关问题