Question

在页脚中移动这些社交图标图片时出现问题。如果我将高度从40px增加到60px，我可以看到完整的图像，但无法弄清楚如何在不改变截面尺寸的情况下在部分内移动它。

代码如下。我很难过。谢谢您的帮助。 CSS：

.footer {
position:fixed;
/*Opacity start*/
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/ 
left:0px;
bottom:0px;
height:40px;
width:100%;
background:#333333;
}

 div.socialIcons ul li 
{
display: inline-block;
vertical-align:top;
padding-right: 10px;
padding-bottom: 5px;
float: right;
}

div.footer a
    {
    color:#441111;
    text-decoration:none;
    }
div.footer ul
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    list-style-type: none;
    }
div.footer p 
{
text-align: center;
font-size: 75%;
padding-left: 10em;
padding-top: .5em;
color: #ECECEC;

}

HTML：

<div class="footer">


<!--   *****   Social media icons   *****   -->
<div class="socialIcons">

    <ul id="profile">
        <li><a href="http://www.twitter.com/" title="Twitter"><img src="./design/twitter.jpg" alt="My Twitter" /></a></li>
        <li><a href="http://www.pinterest.com/" title="Pinterest"><img src="./design/pinterest.jpg" alt="My Pinterest" /></a></li>
        <li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="./design/linkedin.jpg" alt="Me on LinkedIn" /></a></li>
    </ul>
</div>
<p><i>&copy;2013</i></p?>

Answer 1

您可以使用“position：relative”与top / left / right / bottom手动移动块而不影响其他块。

在页脚<div> </div>中定位<img/>个标签

1 个答案: