0

I have form submit buttons that are styled with some css. At the moment I used only submit buttons on the site but for some pages it is better to just use a link. Now I'm trying to change that, but I'm not quitting getting the exact result that I'd like to have. They keep expanding (width:100%;) untill they reach the container, but the link gets out of the container and I dont know why.

Why is the link, not growing untill it reaches the container like the button? I'd prefer to keep using the same class for both the button as the link, but if that isn't possible I'll use different owns.

I've made a quick fiddle

http://jsfiddle.net/QPRFK/

Assume the divs are my container

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

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

The 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;
}
4

2 回答 2

3

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

CSS3box-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+ */
于 2013-07-29T18:25:47.043 回答
2

如果您想要快速、简单的修复，请尝试将box-sizing: border-box;锚标记添加到您的 CSS 中。

大多数元素都有一些由规范或浏览器应用到它们的默认样式。默认情况下，该input[type="submit"]元素被赋予这个，而<a>不是。

于 2013-07-29T18:22:50.310 回答