Question

我一直在遇到一些HTML代码问题。问题是我想模拟选项卡。选定的选项卡的底部为边框，选项卡的容器的底部也为边框。但是在我的默认代码中，它们看上去是分隔的。

我试图查看是否在选项卡的div周围有空格，但是什么也没有。

<html>
<body>
<div class="another">
  another block
</div>
<div class="container">
<div class="box">
First
</div>
<div class="box selected">
Second
</div>
</div>
</body>
</html>

.container {
  border-bottom: 1px solid gray;
  display: flex;
  font-size: 14px;

  .box {
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    &.selected {
      border-bottom: 1px solid red;
    }
  }
}

.another {
  display: flex;
  padding: 0.5rem 0;
}

以下是问题的示例：https://jsfiddle.net/10zqwguh/1/（请注意，红色边框与其容器的灰线分开了）

如果您修改第18行，而不是0.5rem，请编写0.55rem（这会修改容器顶部的框的填充...与容器无关！），即可解决此问题。

这是什么原因？

**编辑** 我想要双边框。我不想要的是它们之间像

Answer 1

之所以这样，是因为您在 .box 中实现了 .selected ，因此从 .selected 中border .box 的border上方 1px 。使用margin-bottom: -1px;将从{strong> .selected 中的border设置为border。框中。

您可以here对其进行检查。

    .container {
      border-bottom: 1px solid gray;
      display: flex;
      font-size: 14px;

      .box {
        text-align: center;
        flex-grow: 1;
        flex-basis: 0;
        &.selected {
          margin-bottom: -1px;
          border-bottom: 1px solid red;
        }
      }
    }

    .another {
      display: flex;
      padding: 0.5rem 0;
    }

    <html>

      <body>
        <div class="another">
          another block
        </div>
        <div class="container">
          <div class="box">
            First
          </div>
          <div class="box selected">
            Second
          </div>
        </div>
      </body>

     </html>

Answer 2

正如asobak所解释的那样，您在父级和子级上都应用了边框，从而产生了双边框。

这是另一种解决方案，将border-bottom放在.box元素上，而不是.container

.container {
  display: flex;
  font-size: 14px;
}

.container .box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  border-bottom: 1px solid gray;
}

.container .box.selected {
  border-bottom: 1px solid red;
  /* or: border-bottom-color: red; */
}

.another {
  display: flex;
  padding: 0.5rem 0;
}

<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

Answer 3

在您的情况下，插入式阴影效果似乎更好：

.container {
  border-bottom: 1px solid gray;
  display: flex;
  font-size: 14px;
}

.box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
}

.selected {
  box-shadow: 0 -1px 0 inset red;
}

.another {
  display: flex;
  padding: 0.55rem 0;
}

<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

或者在元素上使用边框而不接触容器：

.container {
  display: flex;
  font-size: 14px;
}

.box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  border-bottom:1px solid grey;
}

.selected {
  box-shadow:0 -1px 0 inset red;
}

.another {
  display: flex;
  padding: 0.55rem 0;
}

<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

Answer 4

我终于明白了。并且请允许我回答我自己的问题：

关键是我使用了不同的 units ，例如px和rem，而浏览器在进行除法方面做得不好。

我已经说过html和body的像素为14px，框的填充/边距为0.5rem（通常为7px，但值为6）。

所以我要做的是将7px用作边距或填充和样式。

欢呼

边框底部彼此分离

4 个答案: