为什么单击按钮时按钮的样式会发生变化？

Question

我编辑了按钮的样式，但是当我单击一个时，会调用一个函数并更改值（通过 ajax，如果这会影响任何内容），但按钮会像图像上一样更改。这是我的代码：

$(document).ready(function() {

  $(':button').on('click', function(event) {

    $('#ID').val(this.id);

    var tmp = this.id;

    $.ajax({

      type: $('#klik').attr("method"),

      url: $('#klik').attr("action"),

      data: $('#klik').serialize(),

      success: function(d) {

        alert(d)

        $('#' + tmp).val(d);

        const button = document.getElementById(tmp);

        button.disabled = true;

        if (d == 'bomba') {

          alert('bb');

        }

      },

      error: function() {

        alert('Greska')

      }

    });

  });

});

var docFrag = document.createDocumentFragment();

for (var i = 0; i < 9; i++) {

  var row = document.createElement("tr")

  for (var j = 0; j < 9; j++) {

    var elem = document.createElement('input');

    elem.className = 'gumb';

    elem.type = 'button';

    elem.id = 'r' + i + 's' + j;

    elem.value = '';

    elem.innerHTML = elem.value;

    docFrag.appendChild(elem);

  }

  document.body.appendChild(docFrag);

  document.body.appendChild(row);

}

这是我的 CSS：

.gumb {

  width: 50px;

  height: 50px;

  background-color: blue;

  text-align: center;

  font-size: 25px;

  color: white;

  margin-bottom: 10px;

}

Answer 1

您需要对齐文本。像这样的东西：.gumb { &nbsp;vertical-align: middle; }