CSS按鈕 - 父母的100％

Question

任何人都可以建議使用最佳的跨瀏覽器/設備方法來設計一個彎曲邊緣的按鈕，該按鈕將伸展到其父元素的寬度？

該按鈕需要使用背景圖像 - 我正在考慮下面的代碼 - 該按鈕需要伸展到90％外部div的寬度 - btnContent div將伸展和leftCurve/rightCurve保持相同的大小寬度。

<div style="width:90%"> 
<div class="leftCurve"></div> 
<div class="btnContent">button 1</div> 
<div class="rightCurve"></div> 
</div> 

Answer 1

嘗試此方法

<style> 
.outerdiv{ width:100%;} 
.rightcurve{ background:url(rightcurveimage.png) no-repeat 100% 0; height:20px; padding-right:10px;} 
.leftcurve{ background:url(leftcurveimage.png) no-repeat 0 0; width:1%; height:20px; float:left; clear:right;} 
.btncenter{ background:url(btncenterimage.png) repeat 0 0; height:20px; float:left; width:99%;} 
</style> 

<div style="width:100%"> 
<div class="rightcurve"> 
    <div class="leftcurve"></div> 
    <div class=btncenter> Button 1</div> 
</div> 
</div> 

注意：你必須把leftcurve，並btncenter DIV到rightcurve格

Answer 2

這不是實際的代碼。在任何情況下，您都需要將btnContent上的90％放在父元素上。