表格单元之间的空白区域
我有一个包含多个链接的列表。 我希望它们彼此相邻显示，并用彩色背景和它们之间的一些空白区域来显示。
首先我有“显示：内联块;” 但后来我无法给链接一个垂直对齐。 所以我发现我不得不使显示器成为一个表格单元，但现在我没有空白区域，因为我有一个彩色背景。
我已经使用填充，但这并没有给我空白。 这是我的小提琴代码：
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;
}
这是我的小提琴：http://jsfiddle.net/0L7275dq/
你可以添加border: 3px solid; border-color: white border: 3px solid; border-color: white在你的CSS为li 。 您可以查看演示的小提琴链接：小提琴
添加样式
border-collapse:collapse到你的单元格和表格， 应该修复它
使用：
 
和更大的空间：
 
在文本的末尾添加标签，您将在文本后留出空间。 你可以在这里找到这些代码的完整列表HTML代码
链接地址: http://www.djcxy.com/p/94741.html