html - 如何消除导航栏图像之间的间隙？

Question

HTML

<div id="nav_container" align="center">

    <table>
        <tr>
            <td>
                <a href="/"><img src="/assets/nav/buttons/home.png" height="50" width="125"></a>
            </td>
            <td>
                <a href="/free/"><img src="/assets/nav/buttons/free.png" height="50" width="125"></a>
            </td>
            <td>
                <a href="/paid/"><img src="/assets/nav/buttons/paid.png" height="50" width="125"></a>
            </td>
            <td>
                <a href="/about-us/"><img src="/assets/nav/buttons/about-us.png" height="50" width="125"></a>
            </td>
            <td>
                <a href="/mission/"><img src="/assets/nav/buttons/mission.png" height="50" width="125"></a>
            </td>
        </tr>
    </table>

    </div>

CSS

#nav_container{
    background-color: #101010;
    height: 55px;
    width: 650px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

这是我要删除的间隙的屏幕截图。 (导航栏和 Logo 图像只是占位符。导航栏图像后面的黑色背景是为了更好地显示间隙。)

Answer 1

要消除单元格之间的间隙，您需要设置三个 CSS 规则:

#nav_container table {
    border-collapse:collapse;
}
#nav_container td {
    padding:0;
}
#nav_container img {
    vertical-align:top;
}

jsFiddle example

另请注意，我删除了您 table 上的高度。