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。

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

删除按钮文本时，未正确设置按钮对齐

1 个答案: