Question

我有一个版权页脚，有文字和小标识;问题是在屏幕上（移动设备尺寸较小）看起来不错，但在移动设备上，IMG会转到一个新行（文本下面没有它）。

  <div class="copyrightbar">
  <div id="copyright">Copyright &#169; 2014 <img style="padding-left: 7px; padding-right: 5px;" src="images/copyright.png" width="65" height="19" alt=""/> </div>
</div>  

.copyrightbar {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    background-color: #333;
    z-index: 600;
}
#copyright{
    font-size: 12px;
    font-family: Globerb;
    height: 20px;
    position: absolute;
    opacity: 1;
    color: #646566;
    top: 8px;
    z-index:4999;   
}
#copyright img {
position: absolute;
margin-top: -2px;
}

我是css的新手，很抱歉，如果我不专业。

Answer 1

尝试使徽标图像响应，这样当屏幕尺寸变小而不是被撞倒时它会缩小。尝试设置高度并将宽度设置为自动。

  <div class="copyrightbar">
  <div id="copyright">Copyright &#169; 2014 <img style="padding-left: 7px; padding-right: 5px;" src="images/copyright.png" width="auto" height="19" alt=""/> </div>

Answer 2

可能存在问题，因为图像尺寸超出了移动屏幕的尺寸，因此存在下拉线，因为图像没有位置。尝试使用width＆amp;来缩小图像hight。

您甚至可以尝试删除position:absolute;。

IMG走向新线（对齐问题）

2 个答案: