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

Question

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

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

导航栏设计：

编辑：由于我的愚蠢，我会改写。

我需要的是一个带有 3 个项目的切换：

项目 A | B项| 项目 C

谢谢你

标签： htmlcssnavbar

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>