如何在Blueprint CSS中设置选项卡的格式？

我在下面插入了一张图片，显示了我当前的立场（css版本）和我想要的位置（基于表格的版本）

我最初用表格创建了这个布局，我想换一个基于css的版本。我还有很长的路要走

我正在使用Blueprint CSS

当前问题：

• 我想去掉的标签之间有一个缺口。我如何消除这个差距
• 我想在每个选项卡中添加更多填充。如何在不将选项卡推到下一行的情况下执行此操作

使用蓝图的热图
正文{字体大小：70%；字体系列：Verdana，“Helvetica Neue”，Arial，Helvetica，无衬线；填充：5px；}
table.heatmap td{边框：1px纯黑色；}
表.热图{边界塌陷：塌陷；}
a{颜色：黑色；文本装饰：无；}
a:悬停{文本装饰：下划线；}
.以选项卡的形式列出
{
左边距：0px；
}
.列为选项卡，.列为选项卡
{
显示：内联；
}
.悬停链接
{
背景色：#fffdbf；
}
.悬停链接li a:悬停
{
背景颜色：黄色；
}    
table.heatmap tr td{text align:center；}
发行人热图

您发布的屏幕截图中的选项卡之间没有间隙

对于向选项卡添加填充，您可以执行以下操作：

.list-as-tabs li a {
    padding: 3px 5px;
}

这使得链接的顶部和底部填充为3px，左侧和右侧填充为5px。这很好，因为它给了你一个更大的点击目标

你说你不想包装，但从我在截图上看到的情况来看，根本没有足够的空间。你要么缩小字体，要么在标签上使用较短的短语。也许是这个

<ul class="list-as-tabs hover-links">
    <li><a href="#">Draft Heatmap</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">Edit Heatmap/Platforms</a></li>
    <li><a href="#">Revision History</a></li>
</ul>

您能进一步解释一下“差距”是什么意思吗？我不确定我能在屏幕抓图中看到你的意思。

<ul class="list-as-tabs hover-links">
    <li><a href="#">Draft Heatmap</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">Edit Heatmap/Platforms</a></li>
    <li><a href="#">Revision History</a></li>
</ul>