CSS-占父母空间的100％？ [关闭]

Question

我想在链接（a href）标记内创建一个跨度，我希望该跨度采用父链接元素的100％宽度和高度。我一直在尝试相对/绝对位置，但没有任何效果。

示例：

http://jsfiddle.net/dDZRj/

Answer 1

是这个吗？

http://jsfiddle.net/dDZRj/11/

body {
    margin: 25px;
}

.button {
    margin: 5px;
    color: #fff;
    background: #999;
    display: inline-block;
    padding: 10px 0;
    text-decoration: none
}   

.button span {
    padding: 10px;
    border: solid 1px red;
    width: 100%;
}

.big {
    font-size: 2em;
}

Answer 2

在Chrome中测试。

http://jsfiddle.net/loktar/dDZRj/4/

CSS

body {
    margin: 25px;
}

.button {
    margin: 5px;
    color: #fff;
    background: #999;  
}   

.button span {
    border: solid 1px red;
}

.big {
    font-size: 2em;
}

标记

<a href="#" class="button"><span>Click me!</span></a>

<a href="#" class="button big">
    <span>Click me!</span></a>

<a href="#" class="button">
    <span>Click me!</span>
</a>

Answer 3

至少在Firefox中，您需要将我们的源更改为：

<a href="#" class="button">
    <span>Click me!</span></a>

<a href="#" class="button big">
    <span>Click me!</span></a>

<a href="#" class="button">
    <span>Click me!</span></a>

但是，否则@Loktar的CSS效果很好：）

Answer 4

尝试更改范围：

display: block;

Answer 5

我想这就是您想要的，a的宽度可以是任意大小，span会调整其大小以匹配。哦，有填充。

http://jsfiddle.net/dDZRj/12/