在 CSS 中定位图像

Question

我的目标是使用 CSS 在我的网站上放置 Facebook 和 Twitter 按钮。 然而，我想要的似乎并不奏效。

Twitter 图标始终位于 Facebook 图标下方。此外，当我调整浏览器窗口大小时，这些按钮的位置也会发生变化。我做错了什么？这是我的 CSS：

#social {
   position: fixed;
   _position: absolute;
   z-index: 1000;
   left:70%;
   top: 120px;
   width: 100px;
   height: 50px;
}   

#social .facebook {
   float: left;
   width: 35px;
   height: 35px;
   padding: 0 0px 0 0px; /* top, right, bottom, left */
   margin: 0;
   list-style: none;
}

#social .twitter {
   float: left;
   width: 35px;
   height: 35px;
   padding: 0 0px 0 50px; /* top, right, bottom, left */
   margin: 0;
   list-style: none;
}

#social .facebook, .twitter li {
   list-style: none;
}

#social .facebook, .twitter li a {
   text-decoration: none;
}

#social .facebook, .twitter li a img {
   border: none;
}

HTML：

<div id="social">  

<ul class="facebook">
<li><a href="http://www.facebook.com/"><img src="img/facebook-button.png" width="35"    height="35" alt="Facebook" title="Volg ons op Facebook" /></a></li>
</ul>    
<ul class="twitter">
<li><a href="http://www.twitter.com/"><img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" /></a></li>
</ul>

</div>

Answer 1

试试这个？ （IANA css 专家，但我让它看起来像我认为你想要的那样）

#social {
    z-index: 1000;
    float:right;
    margin-top:120px;
    width:100px;
    height:50px;
}   

#social .facebook {
    width:35px;
    float:left;
    height:35px;
    padding:0 0px 0 0px; /* top, right, bottom, left */
    margin: 0;
    list-style:none;
}

#social .twitter {
    float: left;
    width:35px;
    height:35px;
    padding:0 0px 0 px; /* top, right, bottom, left */
    margin: 0;
    list-style:none;
}

#social .facebook, .twitter li {
    list-style:none;
}

#social .facebook, .twitter li a {
    text-decoration:none;
}

#social .facebook, .twitter li a img {
    border: none;
}

我在 facebook 规则中添加了一个 float，删除了 50px< /code> 来自 twitter 规则的填充。

编辑：我的作品使用 div。但你使用列表，所以我认为嵌套列表组合会导致你的列表损坏。

<div id="social">
    <div class="facebook">
        <a href="o-vita.nl/">
            <img src="img/facebook-button.png" width="35" height="35" alt="Facebook" title="Volg ons op Facebook" />
        </a>
    </div>
    <div class="twitter">
        <a href="o-vita.nl/">
            <img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" />
        </a>
    </div>
</div>

编辑：http://notails.com/development/positioningsocialnetworkingicons.html

Answer 2

嗯，你能给我看看网站吗？因为我需要了解有关您网站结构的更多信息，但是您可以尝试这个。

对不起我的英语。

HTML：

<div id="social">
  <ul>
    <li><a href="http://www.facebook.com/"><img src="img/facebook-button.png" width="35"    height="35" alt="Facebook" title="Volg ons op Facebook" /></a></li>
    <li><a href="http://www.twitter.com/"><img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" /></a></li>
  </ul>
</div>

CSS：

#social {
  position:fixed;
  _position:absolute;
  z-index:1000;
  left:70%;
  top:120px;
  width:100px;
  height:50px;
}

#social ul{
  list-style:none;
  margin:0;
  padding:0;
}

#social li{
  float:left;
  width:35px;
  height:35px;
  margin:0 3px;
}

#social a{
  text-decoration:none;
}

#social a img {
   border:none;
}