html - 带有 React 的 css 边框导航栏

Question

我是一名后端开发人员，现在正在做前端，无论如何我需要创建一个如下所示的带边框的导航栏。

我试图让它工作，但从未得到所需的结果。你能指出我吗？谢谢

导航栏设计:

编辑:由于我的愚蠢，我将改写。

我需要的是一个包含 3 个元素的切换:

元素A |元素 B| C项

谢谢

Answer 1

.nav-container{
  width: 300px;
  border: 1px solid #2B82B3;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
}

.item{
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.item:hover{
  color: white;
  background-color: #2B82B3;
}

.spacer{
  width: 1px;
  background-color: #2B82B3;
}

<div class="nav-container">
  <div class="item">1</div>
  <div class="spacer"></div>
  <div class="item">
    Text<br />
    text
  </div>
  <div class="spacer"></div>
  <div class="item">2</div>
</div>