Question

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

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

额外详情

图像的自然尺寸为40像素×40像素签入Chrome时

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

总而言之，我想删除空白区域并将整个列表的高度降低到按钮的高度（不要强制它为40像素），这样它仍然适用于我的流体布局

Answer 1

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

Answer 2

添加 vertical-align: top 到你的 li a img和您的li 为了摆脱5px的底部空间

要摆脱水平空间，请将<ul>的字体大小设置为0

Answer 3

使用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/

Answer 4

只需在CSS中将font-size <ul>设为0

JSFiddle

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

4 个答案: