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 中。

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