Định vị ngang hình ảnh lớp CSS?

Question

Vì vậy, tôi đang cố gắng định vị nút facebook/youtube/twitter trên div có kích thước 318 pixel (khoảng 106 pixel mỗi nút).

Dự kiến ​​Ouput

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

Tôi đang sử dụng phao và display: inline trên mỗi nút như nó được trả lại. Tôi đã cung cấp mã của tôi dưới đây.

CSS MÃ

#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 MÃ

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

Nhưng vấn đề là tôi không đạt vị trí ngang dự kiến ​​của tôi .. nhưng thay vào đó tôi nhận được một vị trí thẳng đứng các nút.

Output thực tế

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

vấn đề là gì? và tôi đang thiếu gì? để đạt được bố cục nằm ngang?

Answer 1

Hãy thử điều này:

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

Như thế này:

http://jsfiddle.net/CQTus/

Answer 2

display: inline-block; nên được áp dụng cho SocialMedia, không socialController

Answer 3

Tôi nghĩ rằng bạn phải sử dụng một danh sách để hiển thị các nút của bạn trong một đường ngang .

Hãy thử this: đó là hướng dẫn (có mã nguồn) cho menu ngang trong CSS.

Tôi hy vọng nó sẽ giúp :)

Answer 4

Kiểm tra bản demo ở đây - http://jsfiddle.net/6PaY4/

Hope this helps!

Answer 5

Bạn có thể đạt được mục tiêu của mình như sau:

Xem này Working Fiddle Ví dụ!

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

Mã của bạn là hoàn toàn hợp lệ vì nó đứng ...

Xem ví dụ tôi đã thực hiện từ your code

Bạn phải có lỗi ở nơi khác. Hãy tìm một tuyên bố khác trong css của bạn ghi đè các kiểu bạn đã cung cấp. Phải có một tuyên bố như sau: a{display:block} Thay đổi nó cho phù hợp.

Answer 7

tôi figured nó đã được cái gì khác trong CSS gây ra trục trặc, nhờ mọi người cho câu trả lời và bảo đảm :)