边框没有对齐

Question

我正在制作导航，其中每个 div 都有一个边框，我有两行，每个部分的宽度为 1/4，但边框每边 1px。

截图： https://prnt.sc/werxlj

  <div class="hidden md:block text-center">velke</div>
  <div class="flex-1 text-center borCenter">Jozko</div>
  <div class="flex-none text-center bor md:w-1/4">Ferko</div>


  <div class="hidden md:flex ">
    <div class="w-1/4 text-center borRight">Shop</div>
    <div class="w-1/4 text-center ">Jurnal</div>
    <div class="w-1/4 text-center ">About us</div>
    <div class="w-1/4 text-center borLeft">Contact</div>
  </div>

css:

<style scoped>
.bor {
  border: 2px solid rgb(17, 24, 39);
}
.borLeft {
  border-left: 2px solid rgb(17, 24, 39);
}
.borRight {
  border-right: 2px solid rgb(17, 24, 39);
}
.borTopNone {
  border: 2px solid rgb(17, 24, 39);
  border-top: none;
}
.borCenter {
  border-top: 2px solid rgb(17, 24, 39);
  border-bottom: 2px solid rgb(17, 24, 39);
}
</style>

想要的效果： https://prnt.sc/wes5j8

我感觉有更合适的方法，感谢任何帮助！

谢谢

Answer 1

我通过删除宽度百分比并使用 flex: 1 和 flex: 2 解决了这个问题

改为