圆形按钮 - 如何STRETCH时里面的文字全宽

我已经创建了一个图像来说明我的问题：圆形按钮 - 如何STRETCH时里面的文字全宽

enter image description here

正如你所看到的。我有一个大的圆形按钮。它由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/[email protected]') right center no-repeat; 
    padding-right: 100px; 
} 
#index-navigation ul li a span.left { 
    background: url('/images/[email protected]') left center no-repeat; 
    padding-left: 100px; 
} 
#index-navigation ul li a span.middle { 
    background: url('/images/[email protected]') left center repeat-x; 
}

如何编辑风格能有锚采取按钮的整个宽度？就像这样：

enter image description here

来源

2012-06-11 Richard Knop

为什么不这样做呢？ http://jsfiddle.net/Qc9cU/2/ –

@EricFortis，可能是因为图像不仅仅是一个圆形的边框？ – Qtax

你有你的文字移到一个单独的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-那么你可以使用:before和:after伪元素以更清晰的标记 - http://jsfiddle.net/JutRB/4/

来源

2012-06-11 12:11:19

已更新为具有更清洁的HTML（但不适用于较旧的IE-s） –

嗨Zoltan。它的工作原理是我的背景图像是透明的。所以左右图像不是很好。你可以在后台看到中间的图像。 –

给你'a：before'和'a：after'' border-radius'太 - http://jsfiddle.net/JutRB/5/ –

这是滑门技术，从fa现在，随着边界线和优雅的退化，旧版浏览器在市场上越来越受到关注。

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

如果你有一个演示，我们可以更专门为你调试它。

来源

2012-06-11 12:16:15 adriatiq

实际上Zoltan已经很好地解决了这个问题。 – adriatiq

圆形按钮 - 如何STRETCH时里面的文字全宽

回答

相关问题