Question

我有一个包含多个链接的列表。我希望它们彼此相邻，并带有彩色背景和它们之间的一些空白区域。

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

我使用了填充但这并没有给我空白区域。这是我的小提琴代码：

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/

Answer 1

使用：

&ensp;

和更大的空间：

&emsp;

在文字末尾添加标签，您的文字后面会有空格。您可以在HTML Codes

找到这些代码的完整列表

Answer 2

添加样式

border-collapse:collapse到你的手机和桌子，应该修复它

Answer 3

#frontpage-menu {
width: auto; 
display: block;
height: auto;
}
.button ul {
height: 65px;
background-color: red;
width: 200px;
display: inline;
}
.button li {
/*display: table-cell;*/
background-color: #4A4A2F;
width: 200px;
height: 65px;
text-align: center;
vertical-align: middle;
padding-left: 10px; /*this is where you should mess around with your white       space.*/
}

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

Answer 4

您可以在border: 3px solid; border-color: white的css中添加li。您可以查看演示文稿的这个小提琴链接：Fiddle

表格单元格之间的空白区域

4 个答案: