溢出击败负边距隐藏边框

Question

我正在设计一个带有内容面板的简单选项卡栏。

为了隐藏当前活动选项卡的底部边框，我使用负 margin-bottom 和 border-bottom 来隐藏该选项卡的边框。

* {
  box-sizing: border-box;
}

#container {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  background-color: lightgray;
}

#wrapper {

}

ul {
  display: flex;
  margin: 0;
  padding: 2px 2px 0 2px;
  border-bottom: 1px solid black;
}

li {
  padding: 10px;
  margin: 0 2px -1px 0;
  list-style: none;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 0;
}

li.active {
  border-bottom: 2px solid lightgray;
}

#content {
  padding: 10px;
}

<div id="container">
  <div id="wrapper">
    <ul>
      <li class="active">Tab 1 (active)</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
    <div id="content">
      My content
    </div>
</div>

它工作完美。

---

当我想添加更多选项卡时，问题就出现了，因此它溢出了容器。我想到的解决方案是使用overflow-x: auto; 。问题是这还添加了一个垂直滚动条，我不知道为什么。我可以通过使用overflow-y:hidden;来克服这个问题。但真正的问题是，它使得不可能再“删除”当前活动选项卡的黑色底部边框。

您可以运行下面的片段，也可以取消注释 html li 元素。

* {
  box-sizing: border-box;
}

#container {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  background-color: lightgray;
}

#wrapper {

}

ul {
  display: flex;
  margin: 0;
  padding: 2px 2px 0 2px;
  border-bottom: 1px solid black;
  overflow-x: auto;
}

li {
  padding: 10px;
  margin: 0 2px -1px 0;
  list-style: none;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 0;
  white-space: nowrap;
}

li.active {
  border-bottom: 2px solid lightgray;
}

#content {
  padding: 10px;
}

<div id="container">
  <div id="wrapper">
    <ul>
      <li class="active">Tab 1 (active)</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
      <li>Tab 5</li>
      <li>Tab 6</li>
      <li>Tab 7</li>
      <!--<li>Tab 8</li>
      <li>Tab 9</li>
      <li>Tab 10</li>-->
    </ul>
    <div id="content">
      My content
    </div>
</div>

有人有解决办法吗？如果没有，有什么替代方法可以实现这一目标？

我真正想要的是继续隐藏活动选项卡的底部边框，并且在出现水平溢出时还可以显示水平滚动条。

谢谢。

Answer 1

为了隐藏当前活动选项卡的底部边框，我使用了负数
margin-bottom 和 border-bottom 用于隐藏该选项卡的边框。

相反，您可以使用 box-shadow: 0 -1px black inset; 表示

和 box-shadow: 1px -1px lightgray inset; 为li.active。

完成所有这些后，您就不再需要负 margin-bottom 了。

问题是这还增加了一个垂直滚动条，而我不是
肯定为什么。我可以通过使用overflow-y:hidden;来克服这个问题。

它向 ul 添加了一个垂直滚动条，因为您向其子级 (li) 添加了 margin-bottom: -1px; 并且它溢出了 Y 轴。

我不知道如何修复水平滚动条，但我认为你可以使用 owlcarousel、slick carousel 等 javascript 轮播来修复它。

这是工作示例：

* {
  box-sizing: border-box;
}

#container {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  background-color: lightgray;
}

#wrapper {

}

ul {
  display: flex;
  margin: 0;
  padding: 2px 2px 0 2px;
  /* border-bottom: 1px solid black; */
  box-shadow: 0 -1px black inset;
  overflow-x: auto;
}

li {
  padding: 10px;
  margin: 0 2px 0 0; /* you don't need to use bottom margin anymore. */
  list-style: none;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 0;
  white-space: nowrap;
}

li.active {
  /* border-bottom: 2px solid lightgray; */
  box-shadow: 1px -1px lightgray inset;
}

#content {
  padding: 10px;
}

<div id="container">
  <div id="wrapper">
    <ul>
      <li class="active">Tab 1 (active)</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
      <li>Tab 5</li>
      <li>Tab 6</li>
      <li>Tab 7</li>
      <!--<li>Tab 8</li>
      <li>Tab 9</li>
      <li>Tab 10</li>-->
    </ul>
  </div>
  <div id="content">
    My content
  </div>
</div>

Answer 2

“删除”当前活动标签的黑色下边框

您可以使用border-bottom-color：透明。

* {
  box-sizing: border-box;
}

#container {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  background-color: lightgray;
}

#wrapper {

}

ul {
  display: flex;
  margin: 0;
  padding: 2px 2px 0 2px;
}

li {
  padding: 10px;
  margin: 0 2px 0 0;
  list-style: none;
  border: 1px solid black;
  
}

li.active {
  border-bottom-color: transparent;
}

#content {
  padding: 10px;
}

<div id="container">

<div id="wrapper">
<ul>
  <li class="active">Tab 1 (active)</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>
<div>
<div id="content">
  My content
</div>
</div>

出现水平溢出时显示水平滚动条

我认为您忘记关闭其中一个 div，并且您的内容位于 .wrapper 内！因此，只需修复该问题，并坚持使用 overflow: auto 和最大宽度以确保它不会扩展。

* {
  box-sizing: border-box;
}

#container {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  background-color: lightgray;
}

#wrapper {
  overflow-x: auto;
  max-width: 100%;
}

ul {
  display: flex;
  margin: 0;
  padding: 2px 2px 0 2px;
}

li {
  padding: 10px;
  margin: 0 2px 0 0;
  list-style: none;
  border: 1px solid black;
  
}

li.active {
  border-bottom-color: transparent;
}

#content {
  padding: 10px;
}

<div id="container">

<div id="wrapper">
<ul>
  <li class="active">Tab 1 (active)</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
  <li>Tab 3</li>
</ul>
</div>
<div id="content">
  My content
</div>
</div>