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

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.只要给你.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%;
}
?

UPDATE

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