html - 在 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，从 twitter 规则中删除了 50px 填充。

编辑: 我的作品使用 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