我的购物车顶部有一个 CSS 进度跟踪器。这是一个内部有无序列表的 div。
在此处查看实时 View :http://wordpress-15765-54444-143522.cloudwaysapps.com/shopping-cart/
进度跟踪器每一步之间的空间随着屏幕尺寸缩小。但是一旦屏幕达到 768 像素,跟踪器就会中断到下一行,即使每一步之间仍有进一步缩小的空间。
我希望整个跟踪器(所有元素)最终一起分解到下一行,但我怎样才能阻止它这么快发生呢?在这种情况发生之前,我需要每一步都进一步缩小。
在此处查看解释问题的实时截屏视频:http://screencast.com/t/nNgDguPEYevc
我试过更改媒体查询、最小/最大宽度和不同的显示值,但没有任何效果。
最佳答案
稍微查看一下进度条后面的 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)的全宽。
注意:本来可以将此添加为评论,因为它并没有真正回答您的问题,更多地帮助您指出正确的方向,但是我缺少这样做所需的代表:)
关于html - 如何阻止无序列表移动到下一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39113619/