CSS停止下拉選項更改大小？

我試圖阻止下拉框從更改大小，只要它有一個選項比下拉框的設置200px寬。這些選項只是由json文件加載 - 問題可以在下面的圖像中看到：CSS停止下拉選項更改大小？

該列表加載遊戲名稱的選擇，當列表加載時，如果有一個選項不長於下拉列表菜單是罰款，並如圖中紅線正確的寬度：

但只要它在它的選項比它導致這個下拉長：（紅線表示窗口的結束，但它當前是透明的，因此您看到的窗體只是一個以窗口爲中心的div）

http://postimg.org/image/kbtf1xs1d/full/

你可以看到我使用的CSS，首先我嘗試設置不同的寬度，但他們沒有改變任何東西，然後我想這可能是一些做溢出，但沒有工作，要麼

HTML對於下拉

<label for="state">Games: </label> 
    <select id="gamesSelect" name="gamesSelect"> 
    </select>

然後填充它

function loadGames() { 

       console.log("Getting games list"); 

       $.getJSON("games.json", function (games) { 

        console.log(games); 

        var gamesSelect = document.getElementById("gamesSelect"); 
        for (var i = 0; i < games.array.length; i++) { 
         var opt = games.array[i]; 
         var el = document.createElement("option"); 
         el.textContent = opt; 
         el.value = opt; 
         el.width = "200"; 
         gamesSelect.appendChild(el); 
        } 


       }); 

     }

所以JS我的人都說它是一個重複的，它不過是僅僅因爲答案沒有對我的工作 - 這是同一類問題，但沒有一個是工作，所以我做了這個

來源

2014-07-18 user3195250

你可以發佈下拉的代碼或鏈接到一個網站嗎？ – Dan

用代碼 – user3195250

更新它你嘗試過'select，option {width：__; ''？ –

更改代碼如下：

#gameSelect 
{ 
    width:200px; 
    overflow:scroll; 
} 

#gameSelect option 
{ 
    width:200px; 
    overflow:scroll; 
}

來源

2014-07-18 15:03:28

謝謝，但沒有奏效：/只是讓所有東西都溢出：http://postimg.org/image/ep2dssx0n/ – user3195250

CSS停止下拉選項更改大小？

回答

相關問題