Html CSS子对象在父对象中的间距不均匀

如何在水平方向（以及在单独的实例中垂直方向）均匀地隔开元素，我已经尝试使用display:inline block

但结果是这样的：

。滚动\u选项卡{
右边框：1px纯黑；
右侧填充：5px；
显示：内联块；
}
...
应用程序
汤/沙拉
披萨
三明治
主菜
甜点

感谢您的帮助。

Flexbox可以做到：

。滚动\u选项卡{
右边框：1px纯黑；
右侧填充：5px；
背景：浅蓝色；
}
#表2{
显示器：flex；
对正内容：空间均匀；
}

应用程序
汤/沙拉
披萨
三明治
主菜
甜点

尝试用以下代码更新CSS

#tabs2{
  display: flex;               /* Newly added */
}
.scroll_tabs {
    border-right: 1px solid black;
    padding-right: 5px;
    display: inline-block;
    flex-grow: 1;            /* Newly added */
    flex-basis: 0;          /* Newly added */
    text-align: center;    /* Newly added */
    padding: 15px 0;      /* Newly added */
}

输出

---

问题是，即使文本对齐：居中，文本仍位于每个框的右侧；在#表2中

#tabs2{
  display: flex;               /* Newly added */
}
.scroll_tabs {
    border-right: 1px solid black;
    padding-right: 5px;
    display: inline-block;
    flex-grow: 1;            /* Newly added */
    flex-basis: 0;          /* Newly added */
    text-align: center;    /* Newly added */
    padding: 15px 0;      /* Newly added */
}