Значки социальных сетей не будут стоять рядом с боком

Я не могу понять это. Я знаю его легко для большинства. Я использовал float влево и вправо, но я не могу представить три значка социальных медиа на самой вершине сайта, чтобы лежать рядом.Значки социальных сетей не будут стоять рядом с боком

Вы можете найти на сайте здесь: 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;}

Для жизни меня Я не могу Кажется, они выясняют, что заставляет их оставаться друг на друга. Может ли кто-нибудь предположить, что я делаю неправильно?

Примечание: значки социальных сетей - это спрайт, но я не верю, что это вызовет проблему.

Дайте мне знать, если у вас есть вопросы?

Спасибо! Frank

источник

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

Ваши пункты списка по умолчанию имеют стиль, поэтому, чтобы получить их рядом друг с другом, вам необходимо изменить отображение или поплавок свойства.

источник

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

Значки социальных сетей не будут стоять рядом с боком

ответ

Смежные вопросы