html - 删除按钮文本时未正确设置按钮对齐方式

Question

我的 html 页面中有 8 个按钮。在删除按钮的文本时，对齐方式没有正确设置。

这是我的 html 页面...它有两行，每行 4 个按钮。在以编程方式清除按钮上的文本时，按钮正在移位。

请建议..

<div id="div1">
  <button class="buttonEvents" name="1" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
  <button class="buttonEvents" name="2" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
  <button class="buttonEvents" name="3" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
  <button class="buttonEvents" name="4" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
</div>
<div id="div2">
  <button class="buttonEvents" name="5" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
  <button class="buttonEvents" name="6" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
  <button class="buttonEvents" name="7" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
  <button class="buttonEvents" name="8" type="button" onmouseup="buttonInput(event,this)"
  oncontextmenu="event.preventDefault();"></button>
</div>

相应的css在这里：

.buttonEvents {
    background-color: #1E5184;

    border-bottom: 0.1em solid # 555;
    border-left: 0.1em solid#CCC;
    border-radius: 10px;
    border-right: 0.1em solid #555; 

    border-top: 0.1em solid # CCC;
    color: #EEE;
    font-size: 1em;
    font-weight: bolder;
    height: 50px;
    margin: 0.2em; 
    -moz-border-radius: 10px; 
    -o-border-radius: 10px;
    padding: 0.2em;
    text-decoration: none;
    -webkit-border-radius: 10px;
    width: 185px;
}

提前致谢

Answer 1

添加vertical-align: top到您button的 s。

buttons 默认为内联（或inline-block）。默认vertical-align值为baseline。按钮中没有文本会调整基线的位置。