表示を持つ子div =親の高さを作る方法：インラインブロックと不特定の高さ？

Question

tumblrのカスタマイズ特有の理由から、ボタンの背景を親から分離する必要があります。ここで

はhtmlです：

<a href="link"> 
    <div class="innerNest"> //I'm guessing we need this to bring the two divs to T:0 L:0 
     <div class="buttonText">{tumblr variable}</div> 
     <div class="buttonBG"></div> 
    </div> 
</a> 

これは私がしてこだわっているCSSで、少なくともタグのために：

a{ 
    display: inline-block; 
} 

私はここに非常にわかりやすいjsfiddleを作りました：http://jsfiddle.net/hVuaf/35/

NB：デモ用にインラインCSSを使用すると、このようになります。

<a href="link" style="background-color:#fff;display:inline-block">Link</a> 

しかし、私は、Tumblrsのカスタマイズされたテーマ編集パネルで変数を割り当てられた色を制御したいと思っているのです。基本的には丘の色をサポートしていますが、＃ではなくrgbaで作業する必要があるため、ボタンのコンポーネントを分離する必要があります。

ありがとうございました。

Answer 1

これはあなたの後ですか？相対して、内部のテキストは、単に標準です：

http://jsfiddle.net/cdj2L/

基本的に、私は位置にアンカーを設定しました。次に、絶対と幅/高さに設定した背景は100％で、アンカーを塗りつぶします。最後に、z-indexはレイヤリングをソートします。

希望するもの：

Answer 2

これはあなたが探しているものですか？私はbg要素を削除し、ちょうど背景を設定するためにコンテナを使用しました。

<a href="link"> 
    <div class="inlineNest"> 
     <div class="btText">Link</div> 
    </div> 
</a> 

.inlineNest { 
    position:relative; 
    display:block; 
    width:100%; 
    height:100%; 
    background-color:rgba(255,0,0,0.5); 
} 

.btText { 
    padding: 5px; 
} 

http://jsfiddle.net/mrtsherman/hVuaf/43/

Answer 3

あなたがこれを行うことができます：http://jsfiddle.net/hVuaf/45/