0

次のフィドルがあります: My Button Bar

私の問題は一般的なものですが、インラインブロックは期待どおりには役に立ちません。アンカーとボタンを同じサイズにする方法を教えてください。青色のボタンは灰色のバー内に収める必要があります。ボタン バーに完全に期待されるように、小さい境界線を持ち、同じサイズにする必要があります。

Firefox と chrome でのみ動作する必要があります。もう IE ( Chrome Frame )に悩まされることはありません。

html は次のようになります。

<div class="buttons">
    <button class="inline-button" type="submit" name="action" value="Update"><span data-icon="icon-cog">icon</span>Save</button>
    <a href="#"><span data-icon="icon-cog">icon</span>Cancel</a>
</div>

私が使用しているCSSは次のとおりです。

div.buttons a, div.buttons button[type=submit] {
  position: static;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  outline: 0;
  vertical-align: baseline;
  height: 100%;
  font-family: PTSansBold;
  font-size: 12pt;
  text-align: left;
  background-color: #051DC3;
  color: white;
  padding: 4px;
  margin: 3px;
  width: 8em;
  border: none;
  text-decoration: none;
}

ありがとう。

4

2 に答える 2

1

デモ

こんにちは今このcssを試してみてくださいこれはCss3です Box-sizing : border-box

div.buttons a, div.buttons button[type="submit"]{
-moz-box-sizing:border-box;
    box-sizing:border-box;
        -webkit-box-sizing:border-box;
    vertical-align:top;
}

デモ

このボックスサイジングの詳細

于 2012-11-23T04:19:29.823 に答える
0 
 <button class="inline-button" type="submit" name="action" value="Update"><span data-icon="icon-cog">icon</span>Save</button>
<button class="inline-button" type="submit" name="action" value="Update"><span data-icon="icon-cog">icon</span>Cancel</button>

2 番目のボタンにボタン タグを使用していません。これを追加することで完全に機能します

于 2012-11-23T04:24:08.403 に答える