html - 表格单元格之间的空白

Question

我有一个包含多个链接的列表。我希望它们彼此相邻显示，背景是彩色的，它们之间有一些空白。

首先我有“display:inline-block;”但后来我无法给链接垂直对齐。所以我发现我必须将显示设置为表格单元格，但现在我没有空白区域，因为我有彩色背景。

我使用了填充，但这并没有给我空白。这是我的 fiddle 代码:

HTML:

<div id="frontpage-menu">
    <ul class="button">
        <li><a href="#">Info</a></li>
        <li><a href="#">Diensten</a></li>
        <li><a href="#">Projecten</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#frontpage-menu {
    width: 1000px;
    display: block;
    height: 50px;
}

.button li {
    display: table-cell;
    background-color: #4A4A2F;
    width: 200px;
    height: 65px;
    text-align: center;
    vertical-align: middle;
}

.button li>a {
    text-decoration: none;
    font-size: 40pt;
    color: #FFFFFF;
    letter-spacing: -4px;
}

这是我的 fiddle :http://jsfiddle.net/0L7275dq/

Answer 1

你可以添加border: 3px solid; border-color: white 在你的 css 中用于 li。您可以查看此 fiddle 链接以获取演示:Fiddle