嘗試制作flexbox選項卡式內容，而我的選項卡將不位於以下內容div的邊框頂部

Question

我試圖使活動選項卡的底部（class = windowTabs'a'元素）與class = windowContent的邊框重疊，如這張照片所示，即選項卡＃1的底部：

無論我做什么，我都無法在class = windowContent上的白色邊框的頂部進行操作

看一下我的筆： http : //codepen.io/agm1984/pen/vyRoYy

問題就在代碼中：

HTML

<div class="windowTabs">
  <a href="javascript:void(0)" onclick="openCity('London')">London</a>
  <a href="javascript:void(0)" onclick="openCity('Paris')">Paris</a>
  <a href="javascript:void(0)" onclick="openCity('Tokyo')">Tokyo</a>
</div>

<div id="London" class="windowContent">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="windowContent">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="windowContent">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

CSS

 /* adamProperties Window Tabs */
.windowTabs {
  padding-top: 1.0em;
  flex: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 1.0em;
  min-height: 1.0em;
}
.windowTabs a {
  border-bottom: red;
}
.windowTabs a:after {
  border-bottom: medium solid black;
}
.windowTabs {
  margin: 10px;
  border-right: red;
}

/* adamProperties Window Content */
.windowContent {
  flex: 1;
  border-left: thin solid white;
  border-top: thin solid white;
  border-right: thin solid black;
  border-bottom: thin solid black;
}

如果以后有人從Google搜索此內容，只需在城市示例中搜索代碼即可。 您將找到原始示例代碼。

我很困惑為什么不能只在元素底部放置2px的邊框並使z-index更大。 根據我的研究，這在顯示時應該起作用：flex打開。

我也很難嘗試利用自己的優勢：

CSS

.windowTabs a:after {
  any kind of shifting wasnt applying any change
}

我可以看到帶有白色邊框的div位於按鈕上方。 我如何使它位於我的`a'標簽之下，或者如何將某些東西壓在它們之上。 我試圖使它盡可能地具有響應性，所以我並沒有太靠近瘋狂的定位方法，利潤率，絕對值方法。 我覺得簡單的事情正在中斷或丟失，可能與flexbox有關。

為了非常清楚，這是一張我指向有問題的白色邊框的照片（我有意將class = windowTabs的高度設置為加重該問題）：

任何幫助將不勝感激。 謝謝。

Answer 1

我不確定我是否完全理解您的問題。 但是我認為窗口內容div不覆蓋選項卡的一個簡單原因是因為它沒有背景色。

嘗試：

.windowContent {
  background-color: #C0C0C0;
}

Codepen： http ：//codepen.io/sol_b/pen/LbmPjm

抱歉，如果我誤解了您的問題！

編輯：更新的代碼筆： http ：//codepen.io/sol_b/pen/RoywKN

Answer 2

多虧ovokuro的推動，我才解決了它。

實際的問題是按鈕上沒有背景色，因此即使它們位於頂部，邊框仍然可見！！