如何減小100％寬度div內兩個元素之間的差距？

我正在處理我的網站標題，它在左側角落有一個徽標圖像（100px x 100px），並使用css表格屬性在中心垂直對齊的導航欄。徽標圖像和導航欄UL元素均位於寬度爲100％的#header div中。如何減小100％寬度div內兩個元素之間的差距？

什麼是最好的方式來減少徽標和導航元素之間的差距，而不會破壞我的佈局？

website 100% width header with two elements

加邊框，以便元件可以很容易地加以區別。我也使用Twitter Bootstrap框架。

我的頁面的HTML可以在這裏找到：http://pastebin.com/RpgcPDdh

這裏是我的CSS：

#wrapper { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-bottom: medium none; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); 
    margin: 0 auto; 
    padding: 0 50px; 
} 

body { 
    background: url("images/maze_bg.png") repeat scroll 0 0 #DDDDDD 
} 

#header { 
    display: table; 
    padding: 20px 0; 
    width: 100%; 
} 

#header ul{ 
    border: solid 1px red; 
    display: table-cell; 
    vertical-align: middle; 
} 

#header img{ 
    border: solid 1px blue; 
}

得到任何幫助。

來源

2013-02-21 Sid

你想移動其中一個或兩個？或者讓一個更大？空白必須交易... – thatidiotguy 2013-02-21 22:13:22

我想將導航移到更接近徽標。 – Sid 2013-02-21 22:14:15

什麼是您的HTML？ – thatidiotguy 2013-02-21 22:15:46

填充權利伎倆！我想我應該堅持下來，而不是在這裏創建一個問題。

來源

2013-02-21 22:29:01 Sid

扔在一個

margin-right: 20px;

或東西就#header ul。這會讓它左移。

來源

2013-02-21 22:20:27 thatidiotguy

我剛剛在Firebug嘗試了一下，但它沒有什麼區別。我只是試了一次，這次編輯我的CSS文件，但仍然沒有區別。我在FF 18.0.2上。 – Sid 2013-02-21 22:23:23

@Sid Ugh，它可能是因爲你將這些東西作爲表格單元格顯示出來。您是否嘗試將圖片標籤的寬度設置爲實際的寬度？ – thatidiotguy 2013-02-21 22:24:49

不，但我只是嘗試了填充 - 右邊的＃頭ul和工作！ – Sid 2013-02-21 22:25:26

如何減小100％寬度div內兩個元素之間的差距？

回答

相關問題