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

额外细节

图像的自然大小为 40 像素 x 40 像素 在 chrome 中签入时

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

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

4

4 回答 4

6

这是因为您将<li>元素视为inline-blocks。这些本质上表现为文本字符并流动，如果在 HTML 中它们之间有空格，那么页面上也会出现在它们旁边的空格。您可以设置font-size在0内<ul>，或者使用display: blockandfloat: left来实现您想要的效果。

于 2013-11-08T09:55:14.503 回答
2

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

要摆脱水平空间，请将 font-size of 设置<ul>为 0

于 2013-11-08T09:53:59.867 回答
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/

于 2013-11-08T09:56:18.933 回答
1

只需在您的 CSS 中设置font-sizeof <ul>0

JSFiddle

于 2013-11-08T09:59:03.893 回答