Question

我不知道如何解决这个问题，我正在尝试在下拉列表中的选项中创建固定宽度跨度，虽然当我打开下拉列表时看起来很酷，但是当我选择任何选项时，空格被删除

当我打开下拉列表时，我可以看到，

  100px each span
  <- 100px   -> 
  | id        |Instrument    |X           |Y          |Date          |

但是当我从下拉列表中选择任何选项时，它看起来像下面，没有任何空格或间距

   idIstrumentXYDate

请有人帮我解决问题，或任何其他方法来达到同样的效果

HTML

<select id='profile_dropdown'></select>

CSS

.dp_opts {
    display: inline-block;
    width:100px !important;
    border:1px solid #ccc;
    text-align:left !important;
}

的Javascript

var spanit = function () {
    var h = "";
    for (var i = 0; i < arguments.length; i++) {
        h += "<span class='dp_opts'>" + arguments[i] + "</span>";
    }

    return h;
}

var opt, dropdown = document.getElementById("profile_dropdown");


opt = document.createElement("option");
opt.innerHTML = spanit("id", "Instrument", "X", "Y", "Date");
opt.value = 'none';
dropdown.options.add(opt)

for (i = 1; i <= 20; i++) {
    opt = document.createElement("option");
    opt.innerHTML = spanit(i, i + 1, i + 2, i + 3, i + 4);
    opt.value = i;
    dropdown.options.add(opt)
}

下拉列表选中选项文本问题（css无效）

0 个答案: