溢出击败负边距以隐藏边框

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>

有人有解决办法吗？如果没有，实现此目的的替代方法是什么？

我真正想要的是一直隐藏active tab的下边框，并且在水平溢出的时候也能显示水平滚动条

谢谢。

Answer 1

"delete" the black bottom border of the current active tab

您可以使用 border-bottom-color: transparent.

* {
  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>

showing an horizontal scroll bar when there is horizontal overflow

我想您忘记关闭其中一个 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>

Answer 2

To hide the bottom border for the current active tab, I use a negative margin-bottom and a border-bottom to hide the border for that tab.

相反，您可以对 <ul> 使用 box-shadow: 0 -1px black inset;，对 li.active 使用 box-shadow: 1px -1px lightgray inset;。

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

The problem is that this also adds a vertical scrollbar, and I am not sure why. I could overcome this by using overflow-y: hidden;.

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

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

这是工作示例：

* {
  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>

溢出击败负边距以隐藏边框

Overflow defeats negative margin to hide border

html

css

overflow