有效的导航选项卡不应该有底线

Question

我正在尝试在表格下方显示标签式导航（class="nav nav-tabs"），并带有垂直空间。

当我使用“<p>&nbsp;</p>”作为间隔符时，标签会正确呈现。但这是太多的空间。我更喜欢使用“<br />”。

但是，当我使用“<br />”时，第一个“活动”标签会在其下边缘获取一条水平线。那是错的。

看起来像这样：

这是代码。虽然我没有在JSFiddle中看到问题，只是在我的网站上（不是很有用？）...

https://jsfiddle.net/iamrobertandrews/ndkmw1te/

问题在Chrome中很明显，但在iOS或Mac OS X中不适用于Safari。

Answer 1

听起来你的<br/>标签可能会有一些CSS添加边框底部样式：first-child。

我已经分了你的例子，并添加了一点css来提供你解释过你要找的余量。

https://jsfiddle.net/xor4x5dw/

.nav.nav-tabs {
  margin-bottom: 10px
}

这是另一个例子，因为我无法判断你是否想要标签上方或下方的空间。

https://jsfiddle.net/607kn7b1/

.nav.nav-tabs {
  margin-top: 10px
}

此外，您可以删除P标签和BR标签的间距。