Question

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

示例：

Answer 1

在Chrome中测试。

<强> 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 2

在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 3

这是吗？

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 4

尝试更改范围：

display: block;

Answer 5

我认为这就是你所追求的，a的宽度可以是任意大小，span会调整其大小以匹配。哦，还有填充物。

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

CSS - 适合100％父母的空间？

5 个答案: