0

我正在尝试在页面底部创建一个固定位置的页脚。但是图像下方的间距和不需要的视点底部存在问题：

基础图片：

根据

问题：

问题

图像下方的填充是不需要的。

HTML：

<div id="containerBarKonge">
    <ul>
        <li><img src="./kongelogo.png" /></li>
    </ul>
</div>

CSS：

#containerBarKonge {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index:9999;
    padding: 0px;
    margin: 0px;
}

#containerBarKonge > ul {
    position: relative;
    list-style-type: none;
    padding: 0px;
    padding-left: 2px;
    margin: 0px 20px;
    min-width: 1053px;
    background-color: #900;
}
#containerBarKonge > ul * {
    padding: 0px;
    margin: 0px;
}
4

2 回答 2

4

尝试将垂直对齐设置为图像底部：

#containerBarKonge img { vertical-align: bottom; }
于 2013-06-17T20:08:35.477 回答
0

问题来自具有“显示：内联”的默认属性的图像；- 这相当于说“让这个图像像文本一样运行”。

图像应该很少用作内联容器。相反，应将图像定义为 display:block或inline-block. 这使您可以更精确地控制图像与 - 只需将其与顶部或底部对齐。如果你想要距离底部 1px 的图像怎么办？与vertical-align你不能。

所以解决方案是执行以下操作：

#containerBarKonge > ul li {
  display: block;
  height: 20px; /* or however tall it is */
}
#containerBarKong > ul li img {
  display: inline-block;
  /* Assuming it is 18px tall and you want it at the bottom: 20 - 18 = 2px */
  margin: 2px 0 0 0;
}

你去吧。您可以精确控制图像的位置，同时保留其像文本一样运行的能力。

于 2013-06-17T20:35:56.927 回答