Html 在div和x27之间添加空格；s的内容和底部边框

我正在尝试向div添加一个底部边框以用作导航栏。我试图达到的效果是：

目前，我有以下代码：

$（“a”）。单击（函数（）{
$（“a”）.removeClass（“当前”）；
$（此）.addClass（“当前”）；
});
.container{
}
.容器.物品{
浮动：左；
列表样式类型：无；
利润率：0.1px；
}
.容器。a项{
颜色：黑色；
文字装饰：无；
背景颜色：绿色；
宽度：50px；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
显示：表格单元格；
垂直对齐：中间对齐；
高度：40px；
}
.容器.项目a.当前{
底部边框：2倍纯红；
}
就目前情况而言，您不能这样做。不能在元素与其自身边框之间添加间隙。但是，您可以将边框添加到其父元素（本例中为
div.item
元素），然后将
padding bottom
添加到同一元素以将其与
a
元素分开：


$（“a”）。单击（函数（）{
$（.current”）.removeClass（“current”）；
$（this.parent（）.addClass（“当前”）；
});
.container{
}
.容器.物品{
浮动：左；
列表样式类型：无；
利润率：0.1px；
}
.容器。a项{
颜色：黑色；
文字装饰：无；
背景颜色：绿色；
宽度：50px；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
显示：表格单元格；
垂直对齐：中间对齐；
高度：40px；
}
.container.item.current{
底部边框：2倍纯红；
垫底：4px；
}


新css:

.container {
}

.container .item {
  float: left;
  list-style-type: none;
  margin: 0 1px;
  border-bottom: 8px solid red;  
}

  .container .item a {
    color: black;
    text-decoration: none;
    background-color: green;
    width: 50px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    height: 40px; 
          border-bottom: 4px solid white;  
  }

    .container .item a.current {
    }

在
伪元素之后再使用一个版本。与其他答案不同，这会将白色边框放在元素内部，而不会将绿色边框推到更远的外部

我添加/更改的有趣部分：

.container .item a {
    ...
    position: relative;
}
.container .item a.current:after {
    content:'';
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 2px;
    width: 100%;
    background-color: #FFF;
}

下面是一个演示：


$（“a”）。单击（函数（）{
$（“a”）.removeClass（“当前”）；
$（此）.addClass（“当前”）；
});
.container{
}
.容器.物品{
浮动：左；
列表样式类型：无；
利润率：0.1px；
}
.容器。a项{
颜色：黑色；
文字装饰：无；
背景颜色：绿色；
宽度：50px；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
显示：表格单元格；
垂直对齐：中间对齐；
高度：40px；
位置：相对位置；
}
.容器.项目a.当前{
底部边框：2倍纯红；
}
.容器.项目a.当前：之后{
内容：''；
位置：绝对位置；
左：0；
底部：2px；
高度：2倍；
宽度：100%；
背景色：#FFF；
}
不确定这是否是您想要的。试试这个。我在类框中添加了一个div。这也可以使用css after方法完成


$（“a”）。单击（函数（）{
$（“a”）.removeClass（“当前”）；
$（此）.addClass（“当前”）；
});
.container{
}
.容器.物品{
浮动：左；
列表样式类型：无；
利润率：0.1px；
}
.容器。a项{
颜色：黑色；
文字装饰：无；
背景颜色：绿色；
宽度：50px；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
显示：表格单元格；
垂直对齐：中间对齐；
高度：40px；
}
.盒子{
边缘顶部：2倍；
高度：2倍；
背景色：红色；
}

添加白色的
边框底部
和红色的
框阴影
怎么样？你们对这种方法有什么限制吗？伪元素是我的想法。这可以用来解释发生了什么；对于那些一开始就需要提问的人来说，只使用代码的答案可能很难理解：-）对我来说，这是最好的答案，只是缺少一点技巧+1我认为这是最好的解决方案。。因为它只是修改已经存在的布局，而没有添加任何元素（甚至是伪元素）。从答案中可以看出，有多种方法可以达到这种效果，而且这个答案似乎没有提供任何明显的坏主意。我很想知道投票失败的原因。否决票的理由将有助于社区了解错在哪里。这正是我希望以非常有效的方式实现的目标。干杯