我需要一種方法來填充鏈接左側和右側的空白空間

我需要自動填充菜單鏈接旁邊的空格。我有一個組成菜單欄的未知數量的鏈接。我需要一種方法來填充鏈接左側和右側的空白空間

我需要一種方法來填補空白旁邊的鏈接的方式，它看起來酷似的鏈接。

如果你看看我的小提琴，你會看到有綠色和黑色鏈接分類： a.menu（綠色）和a.menu_filler（黑色）。我將它們設置爲綠色和黑色，以便明確指出我所說的鏈接，最終它們將具有相同的背景。

我需要a.menu_filler（黑色）鏈接到自我調整到導航欄的div稱爲div.navbar（銀）的剩餘寬度的100％。

我希望我的解釋是可以理解的。

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; 
}

來源

2013-04-11 RFZees

可以在.navbar使用display: table;和border-spacing: 10px;，然後每<a/>元素聲明爲display:table-cell;。

這樣的填料會自動計算，申報單之間的空間將被自動調整，他們將是透明的。

代碼

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

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

DEMO：http://jsfiddle.net/nWzqc/

來源

2013-04-11 12:52:08

豪快...我看到你做了什麼沒有。 LOL這是有點我想要的，但... 在實際的菜單導航欄背景是透明的。而菜單鏈接有一個透明的背景平鋪圖像... 我爲誤導性帖子appologise我應該更多，「呃......透明」我需要什麼。更重要的是... [鏈接] http://jsfiddle.net/RFZees/Gt4SG/11/ – RFZees 2013-04-11 13:35:40

SUCSESS！非常感謝@Andrea Ligios的幫助表示感謝。它使所有的鏈接自動調整。與我在頭腦中的感覺有些不同，但它的效果非常好，迄今爲止，這是唯一可以讓我產生同樣效果的選擇。 – RFZees 2013-04-11 14:26:40

-4

添加display: table-cell;到a和div.navbar刪除高度。

Demo

來源

2013-04-11 13:08:41 luxi

Thanx，匿名@ user2253835 這實際上修復了margin-top： - 18px;由於填充導致的問題。我希望鏈接之間的空格大於導航欄和它下面的內容容器之間的空格。 THANX !!! – RFZees 2013-04-11 13:44:48

我需要一種方法來填充鏈接左側和右側的空白空間

回答

相關問題