Javascript 防止内联块元素移出其父元素

显示问题的JSFIDLE：

我有几个div，里面还有其他div（都是从js创建的）， 以及一个事件处理程序，单击时显示文本（“innerText”）， 我的问题是，事件处理程序使整个内部div下降，是什么导致了它

HTML

js

/*正在创建状态*/
var-cellsar=[]；
var cell={state:'clean'，dangerScale:0}
对于（i=0；iadd
vertical align:top
添加
显示：flex
至
。行
element@Morpheus在这种情况下不需要flexbox..这是一个简单的对齐issueThanks@TemaniAfif，解决了这个问题
  <div class="container">
      <div id="board"></div>
  </div>

.square{

  height: 100%;
  width: 50px;
  border: 1px solid black;
  display: inline-block;
  padding-top: 2.3%;
  box-sizing: border-box;
  text-align: center
}
.row{
  height: 50px;
  width: 500px;
}

/* creating state */
var cellsArr = [];
var cell = {state: 'clean', dangerScale:0}
for(i=0;i<100 ; i++){
  var cell = {state: 'clean', dangerScale:0};
  cellsArr.push(cell)
}
var ranArr = [], bomNum = 20;
for(i=0; i<bomNum; i++){
  ran = Math.floor(Math.random()*100);
  ranArr.push(ran)
}
for(i=0; i<ranArr.length; i++){
  cellsArr[ranArr[i]].state = 'dirty'
}

/* creating the dom */
var id = 0
for (var i = 0; i <= 9; i++) {
  var divRow = document.createElement('div')
  divRow.classList.add('row')

  for (var j = 0; j <= 9; j++) {
    var div = document.createElement('div')
    div.classList.add('square')
    div.id = id
    div.style.cursor = 'pointer';
    div.addEventListener('click',show)
    id ++
    divRow.appendChild(div)
  }
  document.getElementById("board").appendChild(divRow)
}
function show(ev){
  ev.target.innerText = cellsArr[ev.target.id].state;

}