Question

我有以下小提琴： My Button Bar

我的问题是一个常见的问题，尽管内联块并没有像我希望的那样有所帮助。如何使锚和按钮的大小相同。蓝色按钮需要包含在灰色条中，它们应该有一个小边框，并且大小相同，就像完全期望按钮栏 一样。< / p>

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

感谢。

Answer 1

的 Demo 的

嗨，现在试试这个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; }

的 Demo 的

more about this box-sizing

Answer 2

 <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 个答案:

的 Demo 的