0

HTMLページに8つのボタンがあります。ボタンのテキストを削除すると、配置が正しく設定されません。

これが私のhtmlページです...それぞれ4つのボタンが2行あります。プログラムでボタンのテキストをクリアすると、ボタンが移動します。

提案してください..

<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;
}

前もって感謝します

4

1 に答える 1

4

に追加vertical-align: topしますbutton。

buttons はデフォルトでインライン (またはinline-block) です。デフォルトvertical-align値はbaselineです。ボタンにテキストがない場合、ベースラインの位置が調整されます。

于 2012-06-26T10:00:04.073 に答える