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

Question

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

Pet*_*ton 2 html css border margin padding

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

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

额外细节

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

图像的大小是40像素×40像素
标签的大小是40px乘45px ???
li标签的大小是40px到40px
ul和div#footer的高度都是45？
按钮的灰色背景之间有空白区域

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

Answer 1

Luk*_*eGT 6

这是因为你将<li>元素视为inline-blocks.这些基本上作为文本字符进行操作和流动,如果HTML中它们之间存在空白区域,那么页面旁边也会出现空白区域.您可以设置font-size为0内<ul>,或使用display: block和float: left替代达到你想要的效果.

归档时间：	11 年，12 月前
查看次数：	1816 次
最近记录：	11 年，12 月前