0

我有以下小提琴：我的按钮栏

我的问题很常见，尽管 inline-block 并没有像我希望的那样有帮助。如何使锚点和按钮的大小相同。蓝色按钮需要包含在灰色栏中，它们应该有一个小边框，并且大小相同，就像您对按钮栏所期望的那样。

它只需要在 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>

您没有为第二个按钮使用按钮标签。通过添加它可以完美地工作

于 2012-11-23T04:24:08.403 回答