divを全幅に伸ばしてください（利用可能なスペースがある場合）

Question

私は現在tumblrテーマで作業していますが、ページナビゲーションには固執しています。 "前の"ボタンと "次の"ボタンのhtml、またはレンダリングされている場合にのみ表示されます。 したがって、最初のページには次のボタンがなく、最後のページには前のボタンはありません。 これは、私が100％幅に合わせて単一のボタンを伸ばしたい場所です。 私はこれをjavascriptで行うことができますが、テンプレートはjavascriptなしでも機能するので、オプションではありません。

HTMLは次のようになります。

<div id="navigation"> 
<a href="#" id="prev" style="width:476px; float:left;" class="button_normal"><p>Prev</p></a> 
<a href="#" id="next" style="width:476px; float:right;"class="button_normal"><p>Next</p></a> 
</div> 

CSS：親のdivの

.button_normal { 
text-align: center; 
opacity: 0.55; 
height: 30px; 
line-height: 30px; 
background: white; 
font-size: 13px; 
font-weight: 100; 
color: #646464; 
border: 1px solid #646464; 
text-decoration: none; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
margin-bottom: 10px; 
} 

#navigation{ 
clear: both; 
width: 100%; 
} 

幅が960ピクセル幅であるので、2つのボタンの間8px余裕がなければなりません。 min-widthとwidthで固定しようとしました：100％auto;どうやってそれを作るのか本当に分かりませんでした。

ありがとうございます。

Answer 1

テーブルの表示スタイルを使用できます。

/* add these properties to your stylesheet */
#navigation { display:table; }
.button_normal { display:table-cell; }

// remove the inline styles from your anchors 
<div id="navigation"> 
    <a href="#" id="prev" class="button_normal"><p>Prev</p></a> 
    <a href="#" id="next" class="button_normal"><p>Next</p></a> 
</div> 

例：http://jsbin.com/unuwuh/2

Answer 2

次の操作を行うことができます

1. position:relative

あなたの親コンテナに「フルと呼ばれる新しいクラスを作成します幅 "とそれには

position: absolute; 
left:0px; 
right:0px; 

3. ジャニックLipkeがが気にする場合は、このスタイルを持つ唯一の問題は、それは私がわからないIE 7またはIE 6でサポートされていないされ、対応するボタン