Question

我的目标是使用CSS在我的网站上定位Facebook和Twitter按钮。但是，我想要的似乎不起作用。

enter image description here

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

我在float规则中添加了facebook，从50px规则中移除了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;
}

在CSS中定位图像

2 个答案: