Question

我有表单提交按钮，用一些CSS设置样式。目前我只使用网站上的提交按钮，但对于某些网页，最好只使用链接。现在我正试图改变它，但我并没有放弃得到我想要的确切结果。他们不断扩大（宽度：100％;），直到他们到达容器，但链接从容器中出来，我不知道为什么。

为什么链接没有增长直到像按钮一样到达容器？我宁愿继续使用相同的类作为链接的按钮，但如果不可能，我将使用不同的所有者。

我做了一个快速小提琴

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;将解决您的问题。使用vender-specificc标签是明智的......

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+ */

Answer 2

如果您想快速轻松地修复，请尝试将box-sizing: border-box;添加到您的css中以获取锚标记。

大多数元素都有一些默认样式应用于规范或浏览器。默认情况下会给出input[type="submit"]元素，而<a>不是。

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

2 个答案: