首页 文章

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

提问于
浏览 次
2

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

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像素），所以它仍然适用于我的流体布局

html css border margin padding

4 回答

  • 6

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

    回复于
  • 2

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

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

    回复于
  • 1

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

    回复于
  • 1

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

    JSFiddle

    回复于

相关问题