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

以下是我要删除的差距的屏幕截图。（导航栏和徽标图像只是占位符。导航栏图像背后的黑色背景可以更好地显示差距。）

Answer 1

使用css代替图像内联样式和表格

*{box-sizing: border-box}
body{padding: 0; margin: 0; height: 100vh;margin-top: 40px; text-align: center}
nav, nav a{display: inline-block;}
nav{
  background: black
}
nav a{
  color: white;
  background: red;
  text-transform: capitalize;
  padding: 10px 14px
}

<body>
  <nav id=nav_container>
    <a>home</a>
    <a>free</a>
    <a>paid</a>
    <a>about us</a>
    <a>mission</a>
  </nav>
</body>

Answer 2

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

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

<强> jsFiddle example

另请注意，我删除了桌子上的高度。

Answer 3

两种方式：在css：

border-spacing:0px;

在html中：

<table cellspacing="0"></table

Answer 4

1。由于您未使用CSS重置，因此您可能会遇到其他冲突。我建议使用这些样式将表重置为预期的工作。

＆＃13;

/* CSS RESET */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}
table { 
    border-collapse: collapse; 
    border-spacing: 0;
}
th {
    font-weight: bold; 
    vertical-align: bottom;
}
td {
    font-weight: normal; 
    vertical-align: top;
}

/* Your style */
#nav_container {
    background-color: #101010;
    height: 55px;
    width: 650px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin:0;
    padding:0;
}

＆＃13;

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

＆＃13;

2。没有CSS重置：您需要将border:0和inline-block添加到td才能进行完美调整。

＆＃13;

#nav_container {
    background-color: #101010;
    height: 55px;
    width: 650px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin:0;
    padding:0;
}
td {
    border: 0;
    margin:0;
    padding:0;
    display:inline-block;
}

＆＃13;

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

＆＃13;

Answer 5

有很多不同的方法可以完成这项工作。我不是导航栏桌的粉丝。您可以尝试使用nav或ul。

＆＃13;

#nav_container {
  background-color: #101010;
  height: 55px;
  width: 650px;
  margin: 20px auto 0 auto;
}

#nav_bar img {
  float: left;
}

＆＃13;

<div id="nav_container" align="center">
  <nav id="nav_bar" nav_ba>
    <img src="/assets/nav/buttons/home.png" height="55" width="130">
    <img src="/assets/nav/buttons/home.png" height="55" width="130">
    <img src="/assets/nav/buttons/home.png" height="55" width="130">
    <img src="/assets/nav/buttons/home.png" height="55" width="130">
    <img src="/assets/nav/buttons/home.png" height="55" width="130">
  </nav>
</div>

＆＃13;

如何删除导航栏图像之间的间隙？

5 个答案: