瀏覽器沒有擴展爲div寬度增加

Question

我有一個div內的菜單控件。最初我將div寬度設置爲100％，將最小寬度設置爲1200px，以使其與瀏覽器寬度相同。菜單中的項目數量可能會根據未來的需求增加。我只是通過增加菜單中的項目來測試瀏覽器行爲，這裏的項目正在下降。我期望的是，當div寬度增加時，瀏覽器應該提供一個水平條，所以菜單中的所有條目都將顯示在一行中。

CSS代碼：

.maindiv{ position: relative;width: auto !important;width: 100%;min-width: 1200px;}

我的菜單結構

<div class="maindiv" > 
    <ul><li></li></ul> 
</div> 

Answer 1

您需要以下CSS

.maindiv { 
    position: relative; 
    width: 100%; 
    min-width: 1200px; 
    overflow: auto; 
    white-space: nowrap; 
} 

我假設你已經顯示列表項as inline or inline block ...

.maindiv li { 
    display: inline-block; 
} 

而我最後的建議是你真的想min-width - 如果人們調整低於這個瀏覽器，那麼將在瀏覽器窗口水平滾動條以及對DIV的滾動條，如果他們有更多的項目比適合。