Question

我试图阻止这个下拉框改变大小，只要它有一个比下拉框的设置200px宽度更长的选项。这些选项只是由json文件加载 - 问题可以在下面的图像中看到：

该列表会加载一系列游戏名称，当列表加载时，如果有一个不长于下拉菜单的选项就可以了，并且正确的宽度如红线所示：

但只要它有一个比下拉列表更长的选项，就会产生以下结果：（红线表示窗口的结尾，但它当前是透明的，因此您看到的表单只是一个以窗口为中心的div）

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

你可以看到我使用的css，首先我尝试设置不同的宽度，但没有一个改变任何东西然后我认为它可能与溢出有关但是这不起作用

下拉列表的HTML

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

然后填充它的JS

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);
                  }


              });

        }

有些人说这是重复的，但这只是因为答案对我不起作用 - 这是同一类问题，但没有一个是有效的，所以我做了这个

Answer 1

按如下方式更改代码：

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

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

CSS停止下拉选项改变大小？

1 个答案: