边框未对齐

Question

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

  <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 解决了这个问题

改为

边框未对齐

Borders are not lined up

css

tailwind-css