Question

我正在使用具有动态内容的菜单。单击li标签时，标签将获得“活动”类。要查看哪个类别处于活动状态，我在其下方放置了一个边框底部（3像素灰色）我如何才能实现3px的边界底部是li标签下的5 px，而不是像下面那样完全停留在底部：

li.active {  
  border-bottom: 3px solid #333; /* grey border */ 
  padding-bottom: 5px;
}

帖子已更新：https://jsfiddle.net/L7haqtsv/58/

Answer 1

Try this:

 li.active::after{
   content:'';
   display:block;
   margin-top:5px;
   margin-left:15px;
   width:138px;  
   border-bottom: 3px solid #333;  
 }

https://jsfiddle.net/5kn63z1r/

Answer 2

尝试在活动项目中添加更多padding-bottom，我认为这将实现您想要的目标。它对我有用：

li.active { border-bottom: 3px solid #333; padding-bottom:30px; }

Answer 3

您可以使用 ::之后的伪元素添加内容并将其放置：我复制了一部分代码（不是全部），但显示了以下5px的边框：

这是我修改过的部分：

li.active {
  position: relative; // Add position: relative 
  border-bottom: 3px solid #333; /* grey border */ 
}

li.active:after {  
  position: absolute; // position your pseudo element
  content: '';
  border-bottom: 3px solid #333; /* grey border */  
  width: 100%;
  bottom: -8px; // Adjust here the distance
  left: 0;
}

此处的其余代码：

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  background-color: transparent !important;
  border: none !important;
  
}
.nav>li>a:focus, .nav>li>a:hover {
  background-color: transparent !important;
  border: none !important;
}
.nav-tabs {
  border: none !important;
}

body {
  background-color: #e9ebee;
}
.header {
  
  font-size: 20px;
  font-weight: 600;
  color: #4b4f56;
  padding: 15px 0 40px 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  
}
.header-icons, .header-text {
  float: left;
  margin-right: 15px;
}
.header-icons {
  font-size: 28px;
}
.inbetween {
  width: 100%;
  height: 15px;
  background-color: transparent;
}
.content {  
  padding: -1px 0 0 20px !important;
  border-radius: 4px !important;
  background-color: #fff;
  padding: 10px 15px 30px 15px;
}
.tab-content {
  margin-top: 15px;
}

.clear {
  clear: both;  
}

/* lintjes */
.green {
  background-color: #019f0c;  
}
.yellow {
  margin-bottom: 5px;
  background-color: #eedc08;
  border-bottom: 1px solid #000;
}
.red {
  background-color: #dd0000;
}
.white {
  background-color: #ffffff;
}
.blue {
  background-color: #1a5bdd;
}
.green, .yellow, .red, .white, .blue {
  height: 30px;
  width: 17%;
  margin-left: 2%;
  transform: skew(-45deg);
  box-shadow: inset 0px 0px 2px #000000;
}

#green-ribbon, #yellow-ribbon, #red-ribbon, #white-ribbon, #blue-ribbon {
  padding: 10px 10px 10px 10px;
}
#green-ribbon {
  background-color: rgba(1, 159, 12, 0.1);
}
#yellow-ribbon {
  background-color: rgba(254, 235, 9, 0.2);
}
#red-ribbon {
  background-color: rgba(230, 0, 0, 0.1);
}
#white-ribbon{
  background-color: #fff;
}
#blue-ribbon {
  background-color: rgba(30, 105, 255, 0.1);
}

/* header kleuren*/
.green-header {
  color: #019f0c;
}
.yellow-header {
  color: #fec909;
}
.red-header {
  color: #e60000;
}
.white-header {
  color: #4f515a;
}
.blue-header {
  color: #1e69ff;
}
li.active {
  position: relative;
  border-bottom: 3px solid #333; /* grey border */ 
}

li.active:after {  
  position: absolute;
  content: '';
  border-bottom: 3px solid #333; /* grey border */ 
  width: 100%;
  bottom: -8px;
  left: 0;
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

      <ul class="nav nav-tabs" id="myTab">
        <li class="active green"><a href="#green-ribbon">&nbsp;</a></li>
        <li class="yellow"><a href="#yellow-ribbon">&nbsp;</a></li>
        <li class="red"><a href="#red-ribbon">&nbsp;</a></li>
        <li class="white"><a href="#white-ribbon">&nbsp;</a></li>
        <li class="blue"><a href="#blue-ribbon">&nbsp;</a></li>
      </ul>

如何在li标签下将某些px放在边框底部

3 个答案: