Question

我有一个导航栏，其中包含一个带有多个LI项目的UL。活动导航按钮具有不同的背景颜色，但我还需要按钮上的小底部边框。

应用边框时，它显示在LI之外。使用div时，可以使用box-sizing:border-box来获取div中的边框。但是如何抵消LI项目的边界？（list-style-position似乎没有效果）

我的scss代码：

nav {
  ul {
    li {
      float: left;
      padding: 0;

      box-sizing: border-box;
      list-style-position: inside;

      &.active {
        background-color: white;
        border-bottom: solid 6px blue;
        box-sizing: border-box;
        list-style-position: inside;
      }
    }
  }
}

Answer 1

使用div时，可以使用box-sizing：border-box来获取 div内的边框。

为了澄清，box-sizing:border-box不会使边框位于元素内（更改偏移量），它会使边框大小包含在宽度或高度中，如果设置，那么即使你给{{1}高度为25px，底部边框为5px，内部高度将减少到20px。

但是如何抵消LI项目的边界

您无法偏移边框，显示/隐藏元素上的边框的一种解决方法是使用伪元素，这样可以避免在切换边框时跳转/调整元素，但还有更多方法，例如li（悬停时如下图所示）

＆＃13;

linear-gradient

＆＃13;

body {
  background: lightgray;
}
nav ul li {
  position: relative;
  float: left;
  padding: 0 5px;
  list-style-type: none;
}
nav ul li.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: -6px;
  background-color: white;
  border-bottom: solid 6px blue;
  z-index: -1;
}

/*  or one can use linear-gradient  */
nav ul li:hover {
  background: linear-gradient(
    to bottom, white calc(100% - 5px), blue 5px
  ) no-repeat left bottom;
}

＆＃13;

更新

实际上有一种方法可以使用<nav> <ul> <li> Some text </li> <li> Some text </li> <li class="active"> Some text </li> <li> Some text </li> </ul> </nav>来抵消边框，如下所示：

border-image-outset in CSS

Answer 2

创建内部边框的另一种快速而干净的方法是创建一个没有模糊的嵌入阴影。你甚至不需要盒子大小或列表样式。

nav {
  ul {
    li {
      float: left;
      padding: 0;

      &.active {
        background-color: white;
        box-shadow: 0px -6px 0px red inset;
      }
    }
  }
}

是否有LI等效的盒子大小：边框？

2 个答案: