社交媒體圖標不會並排放置

我似乎無法弄清楚這一點。我知道它最容易。我已經使用了左右浮動，但我似乎無法將站點頂部的三個社交媒體圖標放在一起。社交媒體圖標不會並排放置

您可以在這裏找到該網站：http://cmrlawenforcement.com/default.asp

下面是HTML：

<div class="socialcontainer"> 
<span class="connect info"> 
<ul> 
    <li><a href="https://www.facebook.com/pages/CMR-Law-Enforcement-Testing- Review/100299806688670" title="Be our friend" target="_blank" class="facebook">Facebook</a>  </li> 
    <li><a href="https://twitter.com/cmr_policeprep" title="Follow us!" target="_blank" class="twitter">Twitter</a></li> 
    <li><a href="http://www.linkedin.com/profile/view? id=37905494&authType=NAME_SEARCH&authToken=Xbtq&locale=en_US&srchid=695550441389940130460&srchindex=1&srchtotal=333&trk=vsrp_people_res_name&trkInfo=VSRPsearchId%3A695550441389940130460%2CVSRPtargetId%3A37905494%2CVSRPcmpt%3Aprimary" title="Let's connect" target="_blank" class="linked">LinkedIn</a></li> 
</ul> 
</span> 
</div>

這裏是它的CSS：

/* Social Media Sprites */ 
.socialcontainer {float: right; width 300px;} 

.connect ul { 
    list-style: none; 
     margin: 0; 
     padding-right: 15px; 
} 
section.connect li { 

     margin: 7px 0; 
     margin-right: 5px; 
} 
.connect li a{ 
     display: block; 
     width: 24px; 
     height: 24px; 
     text-indent: -999em; 
     background: url(../images/menubar/socialmedia_sprites.png) no-repeat; 
} 
.connect li:last-child {margin-right: 0;} 
.connect a.facebook {background-position: left top;} 
.connect a.facebook:hover {background-position: left bottom;} 
.connect a.twitter {background-position: -24px top;} 
.connect a.twitter:hover {background-position: -24px bottom;} 
.connect a.linked {background-position: right top;} 
.connect a.linked:hover {background-position: right bottom;}

對於我的生活，我可以」 t似乎找出是什麼導致他們全部留在彼此之上。任何可以提示我做錯了什麼？

注意：社交媒體圖標是精靈，但我不相信會導致問題。

讓我知道如果您有任何問題嗎？

謝謝！弗蘭克

來源

2014-01-29 Frank G.

嘗試'display：inline-block'而不是'display：block' –

@JordanForeman我改變了顯示內嵌塊，但仍然搞砸和其他建議？ http://cmrlawenforcement.com/default.asp謝謝！ –

地址：

.connect li { 
    float:left; 
}

或者：

.connect li { 
    display:inline-block; 
}

列表項有默認樣式，所以讓他們彼此相鄰，你需要改變顯示或float屬性。

來源

2014-01-29 19:59:19 j08691

我有它，所以圖標可以躺在那邊，但我怎麼隱藏文字顯示？ –

什麼文字？在你的網站上，他們現在只是堆放在左邊。 – j08691

是的，我不想要文本，我只是想圖標。我希望他們在網站的最右側。但是我沒有做到這一點，因爲你看到:( –

看起來你已經接受了答案，但我討厭讓這個搗鼓去浪費：

jsFiddle

HTML

<ul> 
    <li><a href="#" class="facebook">Facebook</a></li> 
    <li><a href="#" class="twitter">Twitter</a></li> 
    <li><a href="#" class="linkedin">LinkedIn</a></li> 
</ul>

CSS

ul 
{ 
    list-style-type: none;  
} 

ul li 
{ 
    display: inline-block; 
} 

ul li a 
{ 
    display: block; 

    background: url('http://cmrlawenforcement.com/images/menubar/socialmedia_sprites.png'); 
    background-repeat: no-repeat; 

    height: 24px; 
    width: 24px; 

    color: transparent; 
} 

.facebook 
{ 
    background-position: 0 0; 
} 

.facebook:hover 
{ 
    background-position: 0 -24px; 
} 

.twitter 
{ 
    background-position: -24px 0; 
} 

.twitter:hover 
{ 
    background-position: -24px -24px; 
} 

.linkedin 
{ 
    background-position: -48px 0; 
} 

.linkedin:hover 
{ 
    background-position: -48px -24px; 
}

來源

2014-01-29 20:41:14

社交媒體圖標不會並排放置

回答

相關問題