在div的内容和底部边框之间添加空白 [英] Add empty space between div's content and bottom border

问题描述

我试图为导航栏的目的添加底部边框到div。我想达到的效果：

I am attempting to add a bottom border to a div for the purpose of a navigation bar. The effect I am trying to achieve:

目前，我有以下代码：

$("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.item 元素），然后添加 padding-bottom 到元素

As it currently stands you can't do this. You can't add a gap between an element and its own border. You can, however, add the border to its parent element (the div.item element in this case), then add padding-bottom to that same element to separate it from the a element:

$("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 元素，而不是单击 code>元素。

Note that I've also modified your JavaScript to add this .current class to the li element and not the clicked a element.

这篇关于在div的内容和底部边框之间添加空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！