圆形按钮 - 如何将文本内部的文本拉伸到全宽

Question

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

如你所见。我有一个大圆形按钮。它由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;
}

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

Answer 1

您必须将文字移至单独的span才能在整个a内展开。{p>只需给出.left和.right适当的背景，让a抓住主要广告 - 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/

Answer 2

这是滑动门技术，现在已经失去了优势，边界半径和优雅的降级使旧的浏览器在市场上获得牵引力。

演示中的a标签确实占据整个区域，因为它包裹了内部2个跨度，您希望确保删除宽度声明，尽管它随文本扩展。

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