链接图像的html列表中不需要的填充或间隙

我试图使图像列表充当水平导航栏 . 不幸的是尝试我可能无法让图像彼此相邻 . 我已经尝试从每个嵌套图像,链接,列表项和无序列表中删除填充,边距和边框 .

HTML代码很简单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Menu App</title>
    <link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
    <div id="page-1">content</div>
    <div id="footer">
        <ul>
            <li><a href="#"><img src="img/zone.png" alt="toggle zones"></a></li>
            <li><a href="#"><img src="img/nr.png" alt="toggle nr services"></a></li>
            <li><a href="#"><img src="img/wheel.png" alt="toggle wheelchair access"></a></li>
            <li><a href="#"><img src="img/cycle.png" alt="toggle cycle access"></a></li>
        </ul>
    </div>
</body>
</html>

并且css代码如下

body {
    margin: 0;
}

#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
}

li a {
    display: block;
}

li a img {
    border-radius: 0.2em;
    background: #ccc;
    width: 100%;
    border: none;
}

Extra Details

在检查铬时,图像的自然尺寸为40像素×40像素

  • 图像的大小是40像素×40像素

  • a标签的大小是40px乘45px ???

  • li标签的大小恢复为40px×40px

  • ul和div#footer的高度都是45?

  • 按钮的灰色背景之间有空白区域

总结一下,我想删除空白区域,并将整个列表的高度降低到按钮的高度(不强制它为40像素),所以它仍然适用于我的流体布局

回答(4)

3 years ago

它's because you'将 <li> 元素视为 inline-block s . 这些基本上作为文本字符进行操作和流动,如果HTML中它们之间存在空白区域,那么页面旁边也会出现空白区域 . 您可以在 <ul> 中将 font-size 设置为 0 ,或使用 display: blockfloat: left 来获得所需的效果 .

3 years ago

vertical-align: top 添加到 li a imgli 以便摆脱5px底部空间

要删除水平空间,请将 <ul> 的font-size设置为0

3 years ago

使用 display:inline-block 将导致浏览器在 <li> 元素周围显示空白字符 . 为了删除这个额外的空格,你必须做这样的事情:

<ul>
    <li><a href="#"><img src="img/zone.png" alt="toggle zones"></a></li
    ><li><a href="#"><img src="img/nr.png" alt="toggle nr services"></a></li
    ><li><a href="#"><img src="img/wheel.png" alt="toggle wheelchair access"></a></li
    ><li><a href="#"><img src="img/cycle.png" alt="toggle cycle access"></a></li>
</ul>

如您所见,我正在移除标签之间的额外空间 .

有关更多信息,请参阅:http://css-tricks.com/fighting-the-space-between-inline-block-elements/

3 years ago

只需在CSS中将 <ul><ul> 设置为 0 即可

JSFiddle