Pozycjonowanie w tle w stylu CSS w poziomie?

Question

Próbuję ustawić przycisk facebook/youtube/twitter na dziale o szerokości 318 pikseli (czyli około 106 pikseli na przycisk).

Oczekiwany Ouput

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

Używam pływak i display: inline na każdego przycisku jako jego jest renderowane. Podałem mój kod poniżej.

kod 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) 
} 

kod 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> 

Ale problem jest nie jestem osiągnięcia oczekiwanych moje pozycjonowanie poziome .. ale zamiast Dostaję pionowe pozycjonowanie przycisków.

Rzeczywista wyjściowa

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

Na czym polega problem? i czego mi brakuje? osiągnąć poziomy układ?

Answer 1

Spróbujmy tak:

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

Jak to:

http://jsfiddle.net/CQTus/

Answer 2

wyświetlacz: blok inline; powinny być stosowane do SocialMedia nie socialController

Answer 3

myślę, że trzeba użyć listy wyświetlanie przycisków w linii poziomej .

Wypróbuj this: to samouczek (z kodem źródłowym) do poziomego menu w CSS.

Mam nadzieję, że to pomaga :)

Answer 4

Sprawdź demo tutaj - http://jsfiddle.net/6PaY4/

nadzieję, że to pomaga!

Answer 5

można osiągnąć swój cel tak:

Zobacz ten Working Fiddle przykład!

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

Answer 6

Twój kod jest całkowicie poprawny, gdyż stoi ...

Patrz przykład i wykonany z your code

Musisz mieć błąd gdzie indziej. Poszukaj innej deklaracji w twoim css, która zastępuje podane style. Musi istnieć jedna taka deklaracja: a{display:block} Zmień ją odpowiednio.

Answer 7

Pomyślałem, że to coś innego w CSS powodując usterki, dzięki wszystkim za odpowiedzi i otuchy :)