html - 将我的提交按钮转换为链接并保持相同的样式

Question

我有一些带有 CSS 样式的表单提交按钮。目前我只使用网站上的提交按钮，但对于某些页面，最好只使用链接。 现在我正在尝试改变它，但我并没有放弃获得我想要的确切结果。 它们不断扩展(宽度:100%；)直到到达容器，但链接脱离了容器，我不知道为什么。

为什么链接像按钮一样直到到达容器才增长？我更愿意为按钮和链接继续使用相同的类，但如果那不可能，我将使用不同的类。

我做了一个快速的 fiddle

http://jsfiddle.net/QPRFK/

假设 div 是我的容器

<div>
    <input type="submit" value="submitBtn" class="btn">
</div>

<div>
    <a href="#" class="btn">link</a>
</div> 

CSS

.btn {
  background-color:#EE3399;
  border:3px solid #A10055;
  display:inline-block;
  color:#26328c;
  font-family:Verdana;
  font-size:20px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  cursor: pointer;
  width: 100%;
  text-align:center;
}

div{
    width:750px;
    background:green;
    margin-bottom:1em;
}

Answer 1

这是因为 width: 100%; 仅基于内容，而不是填充或边框。由于您同时拥有两者，填充和边框延伸得太远。

CSS3 box-sizing: border-box; 将解决您的问题。使用特定于供应商的标签是明智的...

http://css-tricks.com/box-sizing/

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */