如何阻止無序列表移動到下一行

我的購物車頂部有一個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

如何阻止無序列表移動到下一行

回答

相關問題