Question

我想删除标签和显示的水平线之间的空格。请找到小提琴http://jsfiddle.net/yy1t6w1f/。用于创建水平线的示例代码：

div.hr {
background: #fff  no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}

div.hr hr {
display: none;
}

创建的标签应该触及水平线，它们在标签和div之间应该没有空格。谢谢。

Answer 1

table, table td {
    border-spacing: 0px;
    padding: 0px;
}

hr { margin: 0; }

http://jsfiddle.net/yy1t6w1f/6/

Answer 2

添加

hr { margin: 0; }

会做到这一点。 HTML中的hr标记具有默认边距，这会导致这两个元素之间的空间。请注意，上面的代码将删除所有边距。如果您只想删除上边距，则可以使用margin-top代替margin。

事实上，在您的情况下，您根本不需要使用hr标记;你可以删除它，只需添加：

border-bottom: 1px solid #888888;

到.tabDiv CSS选择器;这也应该符合你的目的。

Answer 3

除非我误解你正在构建的内容，否则有更好的方法来写这个。

见下文：

nav a {
  display: inline-block;
  background-color: #efefef;
  border: 1px solid #888;
  border-top: 2px solid #888;
  border-top-left-radius: 10px 5px;
  
  min-width: 96px;
  padding: 0 4px;
  text-align: center;
  
  font: 18px impact;
  letter-spacing: 2px;
  color: #3B0B17;
  text-transform: uppercase;
  text-decoration: none;
}

<nav>
  <a href="">FirstTab</a>
  <a href="">SecondTab</a>
  <a href="">ThirdTab</a>
</nav>

删除制表符和行之间的额外空格

3 个答案: