CSS類背景圖像水平定位？

所以我試圖在一個318像素的div上定位一個facebook/youtube/twitter按鈕（大約每個按鈕106個像素）。CSS類背景圖像水平定位？

預期輸出繼電器

expected layout http://iforce.co.nz/i/dseazq4c.zqc.png

我使用浮動並顯示：內嵌在每個按鈕上作爲其被渲染。我在下面提供了我的代碼。

CSS代碼

#socialController{ 
width: 318px; 
background-color:#fff; 
display: inline; 
} 
.socialmedia 
{ 
width:106px; 
height:20px; 
float:left; 
vertical-align:middle; 
background-position:center center; 
background-repeat:no-repeat; 
background-color:#373737; 
} 
.socialmedia:hover{ 
background-color:#444 
} 
#sm_fb{ 
background-image:url(../img/fb.png) 
} 
#sm_tw{ 
background-image:url(../img/tw.png) 
} 
#sm_yt{ 
background-image:url(../img/yt.png) 
}

HTML代碼

<div id="socialController"> 
<a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a> 
<a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a> 
<a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a> 
</div>

但問題是我沒有達到我的預期水平位置..而是我得到一個垂直定位的按鈕。

實際輸出

actual output http://iforce.co.nz/i/2mce1tlk.53i.png

問題是什麼？我錯過了什麼？實現水平佈局？

來源

2012-06-11 Killrawr

讓我們試試這個：

#socialController { 
width: 318px; 
background-color:#fff; 
display: block; 
}

像這樣：

http://jsfiddle.net/CQTus/

來源

2012-06-11 07:58:17 skywlkr

嘿我已經嘗試過之前，我發表的帖子，任何其他的想法？ – Killrawr

對我來說，它的工作原理是這樣的：http：/ /jsfiddle.net/CQTus/ – skywlkr

我認爲你的鏈接或你的容器正在從之前的聲明中獲得一些風格，而你在這裏拷貝過來的風格被它們覆蓋。你應該檢查元素在Firebug中的實際風格或類似的東西。 – skywlkr

display：inline-block;應適用於社會化媒體，而不是socialController

來源

2012-06-11 07:58:01 Softnux

我申請變更東西在別的CSS，感謝大家，但我仍然得到我的鏈接垂直和水平不顯示:(任何其他想法？ – Killrawr

不是真的，應該工作：http://jsfiddle.net/7tcbT/ – Softnux

我認爲你必須使用一個列表在一個水平線上，以顯示你的按鈕。

嘗試this：這是一個教程（帶源代碼），用於CSS中的水平菜單。

我希望它能幫助:)

來源

2012-06-11 08:01:39

任何機會，你可以給我一個基於我的CSS的實現？ :) – Killrawr

檢查這裏的演示 - http://jsfiddle.net/6PaY4/

希望這有助於！

來源

2012-06-11 08:07:47 Dipak

@Killrawr檢查我在這裏發佈的演示。它應該爲你工作 – Dipak

你可以實現你的目標是這樣的：

看到這個Working Fiddle例子！

enter image description here

CSS

#socialController{ 
    width: 318px; 
    background-color:#fff; 
    display: block;   /* display the wrapper as a block */ 
} 
.socialmedia { 
    width:106px; 
    height:20px; 
    display:block;   /* display the element as a block */ 
    float:left;    /* float the elements to place them side by side */ 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-color:#373737; 
}

來源

2012-06-11 08:18:50 Zuul

你的代碼，因爲它代表完全有效的...

見我從your code

所做的例子，您必須在其他地方有錯誤。在你的CSS中尋找另一個覆蓋你提供的樣式的聲明。必須有一個這樣的聲明：a{display:block}相應地修改它。

來源

2012-06-11 08:23:03 Christoph

+1的努力:)謝謝！ – Killrawr

@Killrawr我猜對了嗎？ – Christoph

是的，你做的..問題是我的代碼中的其他地方與定位衝突..因此給我意想不到的結果。 – Killrawr

我想這是造成故障的答案和安慰:)

來源