2

我创建了一个图像来说明我的问题：

在此处输入图像描述

如你看到的。我有一个大的圆形按钮。它由 3 张图像组成。一张图片在右侧，另一张在左侧，另一张在中间。

左右图像非常宽，因为按钮中有渐变，所以我不能让它们只有 5px 宽。现在的问题是，里面的文字仅限于中间区域。我希望它延伸到整个按钮。

以下是我的风格：

#index-navigation ul li a {
    height: 96px;
    line-height: 96px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    background: url('/images/btn_grey@2x-right.png') right center no-repeat;
    padding-right: 100px;
}
#index-navigation ul li a span.left {
    background: url('/images/btn_grey@2x-left.png') left center no-repeat;
    padding-left: 100px;
}
#index-navigation ul li a span.middle {
    background: url('/images/btn_grey@2x-middle.png') left center repeat-x;
}

如何编辑样式以使锚点占据按钮的整个宽度？像这样：

在此处输入图像描述

4

2 回答 2

6

您必须将您的文本移动到一个单独span的，以便能够将它延伸到整个a. 只要给你.left和.right适当的背景，让a主bg - http://jsfiddle.net/JutRB/3/

a {
    height: 96px;
    width: 350px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    background: beige;
    border: 2px solid #000;
    display: inline-block;
    position: relative;
}

a span.left, a span.right {
    float: left;
    background: yellow;
    height: 96px;
    width: 100px;
    display: inline-block;
}

a span.right {
    float: right;
    background: pink;
}

a span.text {
    position: absolute;
    display: block;
    text-align: center;
    top: 30px;
    width: 100%;
}
​

更新

或者，如果您想要一个 CSS3 解决方案并且不关心较旧的 IE-s，那么您可以使用带有更清晰标记的:before伪:after元素 - http://jsfiddle.net/JutRB/4/

于 2012-06-11T12:11:19.677 回答
0

它是滑动门技术，如今随着边框半径和优雅的退化而失宠，旧浏览器在市场上获得了牵引力。

您的演示中的 a 标签确实占据了整个区域，因为它包裹了内部 2 个跨度，您要确保删除宽度声明，以便它与文本一起扩展。

如果您有演示，我们可以更具体地为您调试它。

于 2012-06-11T12:16:15.147 回答