Question

通过在标签元素上设置url(r'^password_reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})$', auth_views.password_reset_confirm, {'post_reset_redirect' : '/accounts/password_done/'}, name='password_reset_confirm'),，我知道如果在this等ul元素上设置边框时，如何删除（覆盖）活动标签上的边框。

但是，当边框在另一个面板上时，我该怎么做？我设置margin-right: -1px，但没有意义......

Here is the demo，我想打破活动标签和右侧面板之间的边界。

Answer 1

您需要设置position: relative和z-index以将li放在面板

之上

li {
  color: #999;
  border: 1px solid #999;
  border-right-color: transparent;
  margin-bottom: 20px;
  /* add these two rules */
  position: relative;
  z-index: 2;
}

Answer 2

可以有多种解决方案。首先要确保选项卡位于内容面板上方，并且右边框重合。然后，您可以将右边框的颜色与面板的背景颜色相同，即白色。如下所示https://jsfiddle.net/6fnL13w4/1/

.left {
  width: 20%;
  margin-top: 50px;
  margin-right: -1px;
  float: left;

  z-index:1;
  position:relative;
}
li.active {
  background-color: #fff;
  border-right-color: #fff;
}

Answer 3

我想你忘了设置位置属性。只需添加position:relative它应该可以正常工作。

当边框不在ul元素上时，如何覆盖活动选项卡上的边框

3 个答案: