Question

我似乎无法弄清楚这一点。我知道这很容易。我左右使用浮动，但我似乎无法在网站的最顶端获得三个社交媒体图标并排放置。

您可以在此处找到该网站：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;}

对于我的生活，我似乎无法弄清楚是什么导致他们彼此保持一致。可以建议我做错了吗？

注意：社交媒体图标是一个精灵，但我不认为这会导致问题。

如果您有任何疑问，请告诉我？

谢谢！弗兰克

Answer 1

添加：

.connect li {
    float:left;
}

或者：

.connect li {
    display:inline-block;
}

您的列表项具有默认样式，因此要将它们彼此相邻，您需要更改显示或浮动属性。

Answer 2

看起来你已经接受了答案，但我不想让这个小提琴浪费掉：

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

社交媒体图标不会并排放置

2 个答案: