सीएसएस वर्ग पृष्ठभूमि छवि क्षैतिज स्थिति?

Question

तो मैं 318 पिक्सेल में एक div पर एक फेसबुक/यूट्यूब/ट्विटर बटन को स्थानांतरित करने की कोशिश कर रहा हूं (इसलिए प्रति बटन 106 पिक्सेल)।

ouput

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

उम्मीद मैं नाव और प्रदर्शन उपयोग कर रहा हूँ: प्रत्येक बटन पर इनलाइन के रूप में अपनी गाया जा रहा है। मैंने अपना कोड नीचे दिया है।

सीएसएस कोड

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

एचटीएमएल कोड

<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

क्या समस्या है? और मुझे क्या याद आ रही है? एक क्षैतिज लेआउट प्राप्त करने के लिए?

Answer 1

की इस कोशिश करते हैं:

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

इस तरह

।

this आज़माएं: यह सीएसएस में क्षैतिज मेनू के लिए एक ट्यूटोरियल (स्रोत कोड के साथ) है।

मुझे आशा है कि यह मदद करता है :)

Answer 2

डिस्प्ले: इनलाइन-ब्लॉक; मुझे लगता है कि आप एक क्षैतिज रेखा में अपने बटन प्रदर्शित करने के लिए एक सूची का उपयोग करना चाहिए

http://jsfiddle.net/CQTus/

Answer 3

: SocialMedia को लागू किया जाना चाहिए, नहीं socialController

Answer 4

डेमो यहाँ देखें - http://jsfiddle.net/6PaY4/

आशा इस मदद करता है!

Answer 5

आप इस तरह अपने लक्ष्य को प्राप्त कर सकते हैं:

इस Working Fiddle उदाहरण मिलते हैं!

सीएसएस

#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

आपका कोड पूरी तरह से वैध के रूप में यह खड़ा है ...

उदाहरण मैं your code

से बने देखें तो आपको एक त्रुटि कहीं और होना आवश्यक है। अपने सीएसएस में एक और घोषणा की तलाश करें जो आपके द्वारा प्रदान की गई शैलियों को ओवरराइड करता है। इस तरह की एक घोषणा होनी चाहिए: a{display:block} तदनुसार इसे बदलें।

Answer 7

मैं लगा यह जवाब और आश्वासन :)