html - リンクの左右の空きスペースを埋める方法が必要です

Question

メニュー リンクの横のスペースを自動で埋める必要があります。メニュー バーを構成するリンクの数が不明です。

リンクの横の空きスペースを、リンクとまったく同じように埋める方法が必要です。

私のフィドルを見ると、分類された緑と黒のリンクがあることがわかります: a.menu(green) と a.menu_filler(black)。最終的にどのリンクについて話しているのかが明確になるように、それらを緑と黒に設定しました。

div.navbar (シルバー) と呼ばれる navbar div の残りの幅の 100% に自己調整するには、a.menu_filler(black) リンクが必要です。

http://jsfiddle.net/RFZees/Gt4SG/6/

私の説明が理解できることを願っています。

HTML:

<div class='navbar'> 
 <a class='menu_filler'></a>
 <a class='menu' href='#'>LINK</a>
 <a class='menu' href='#'>BIGGER LINK</a>
 <a class='menu' href='#'>BIGGEST LINK</a>
 <a class='menu_filler'></a>
</div>

CSS:

div.navbar {
    background:silver;
    height:50px;
    width:600px;
    margin:auto;
    text-align: center;
}
a.menu_filler {
    background:black;
    height:30px;
    width:auto;
    padding:10px;
    margin:5px;
}
a.menu {
    background:green;
    height:30px;
    padding:10px;
    margin:5px;
    color:blue;
}
a.menu:hover {
    background:blue;
    color:green;
}

Answer 1

.navbar で and を使用して、すべてのdisplay: table;要素をとして宣言できます。border-spacing: 10px;<a/>display:table-cell;

このようにして、フィラーが自動的に計算され、div 間のスペースが自動調整され、透明になります。

コード

div.navbar {
    /* all your stuff */
    display: table;
    border-spacing: 10px;
}

div.navbar > a{
  display: table-cell;  
}

デモ: http://jsfiddle.net/nWzqc/

Answer 2

display: table-cell;に高さを追加aおよび削除しdiv.navbarます。

デモ