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

我似乎无法弄清楚。我知道大多数情况下都很容易。我曾经使用过左右浮动，但似乎无法在网站的最上方同时放置三个社交媒体图标。

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

在我的一生中，我似乎无法弄清楚是什么原因导致他们都相互依存。有什么可以暗示我做错了吗？

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

让我知道您是否有任何疑问？

谢谢！
坦率

最佳答案

加：

.connect li {
    float:left;
}

要么：

.connect li {
    display:inline-block;
}

您的列表项具有默认样式，因此要使它们相邻，您需要更改display或float属性。

关于html - 社交媒体图标不会并排放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21441294/