在div内容和底部边框之间添加空白间隔

Question

我正在尝试为导航栏添加底部边框，以达到以下效果：

目前，我的代码如下：

$("a").click(function() {
  
  $("a").removeClass("current");
  
  $(this).addClass("current");
  
  });

.container {
}

.container .item {
  float: left;
  list-style-type: none;
  margin: 0 1px;
}

  .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; 
  }

    .container .item a.current {
      border-bottom: 2px solid red;  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  
  <div class="item">
    <a class="current" href="#">Page 1</a>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>

我找不到一种方法，在div内容和底部边框之间添加空白，而不让空白与div背景颜色相同。

- LoveFortyDown

---

加入一个白色的border-bottom和红色的box-shadow如何？对于这种方法你有任何限制吗？ - Harry

伪元素是我的想法。 - Paulie_D

Answer 1

目前不支持此操作。无法在元素与其自身边框之间添加间距。但是，您可以将边框添加到其父元素（在此示例中为div.item元素），然后在同一元素中添加padding-bottom以将其与a元素分隔：

$("a").click(function() {
  
  $(".current").removeClass("current");
  
  $(this).parent().addClass("current");
  
  });

.container {
}

.container .item {
  float: left;
  list-style-type: none;
  margin: 0 1px;
}

  .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; 
  }

    .container .item.current {
      border-bottom: 2px solid red;  
      padding-bottom: 4px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  
  <div class="item current">
    <a href="#">Page 1</a>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>

请注意，我还修改了您的JavaScript代码，将.current类添加到li元素而不是单击的a元素。

- James Donnelly

---

我认为这是最好的解决方案，因为它只是修改了已经存在的布局，而不添加任何元素（即使是伪元素）。 - Mr_Green

从答案中可以看出，有多种方法可以实现这种效果，而这个答案似乎并没有提供任何明显的错误想法。很想知道下投票的原因。对投票的理由进行解释将有助于社区了解问题所在。 - Harry

正是我所希望达到的目标，而且非常高效。干杯！ - LoveFortyDown

Answer 2

演示

新的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 {
    }

- Nick

---

需要解释一下正在发生的事情，只提供代码往往难以理解，特别是对于最初需要提出问题的人来说。 :-) - TylerH

Answer 3

使用:after伪元素的另一种版本。与其他答案不同，这将在元素内部放置白色边框，而不是将绿色进一步推向外部。

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

.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").click(function() {
    $("a").removeClass("current");
    $(this).addClass("current");
});

.container {
}
.container .item {
    float: left;
    list-style-type: none;
    margin: 0 1px;
}
.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;
    position: relative;
}
.container .item a.current {
    border-bottom: 2px solid red;
}
.container .item a.current:after {
    content:'';
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 2px;
    width: 100%;
    background-color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">      
  <div class="item">
    <a class="current" href="#">Page 1</a>
  </div>
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  <div class="item">
    <a href="#">Page 3</a>
  </div>
</div>

示例: http://jsfiddle.net/osajfgLc/

- dfsq

---

对我来说，这是最好的答案，只是缺少一个 fiddle +1。 - ProllyGeek

Answer 4

不确定这是否是您想要的。请尝试此方法。我添加了一个类名为box的div。这也可以使用css after方法来完成。

$("a").click(function() {
  
  $("a").removeClass("current");
  
  $(this).addClass("current");
  
  });

.container {
}

.container .item {
  float: left;
  list-style-type: none;
  margin: 0 1px;
}

  .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; 
  }

    .box {
      margin-top:2px;
      height: 2px;
      background-color:red;  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  
  <div class="item">
    <a class="current" href="#">Page 1</a>
    <div class="box"></div>
  </div>
  
  <div class="item">
    <a href="#">Page 2</a>
  </div>
  
  <div class="item">
    <a href="#">Page 3</a>
  </div>
  
  <div class="item">
    <a href="#">Page 4</a>
  </div>
  
  <div class="item">
    <a href="#">Page 5</a>
  </div>
  
  <div class="item">
    <a href="#">Page 6</a>
  </div>
  
</div>

- Anuj Yadav