如何将菜单项加速器调整为不同的菜单宽度？

Question

我的menu-button 有点宽：

.menu-button {
  -fx-pref-width: 250px;
  -fx-background-color: #72b3c9;
  -fx-padding: 5 16 5 16;
}

并且菜单及其项目（及其加速键）按预期显示，如下所示：

但是当我想将menu-item的宽度与menu-button的宽度对齐时，像这样：

.menu-item {
  -fx-pref-width: 250px;
  -fx-pref-height: 40px;
  -fx-padding: 5px 16px 5px 16px;
}

然后我没有将加速键对齐到菜单项的右侧：

我想要（并且期望）是加速键跟随菜单项的宽度，并且与各自菜单项的右边缘对齐，如下所示：

我怎样才能做到这一点？

编辑：

可以使用增加左标签填充的技巧，从而迫使加速器更靠右：

.menu-item .label {
  -fx-padding: 0 120px 0 0;
}

但是，这是一种硬编码的依赖于平台的方法，每次更改菜单项标签文本或加速键时都需要进行调整。

Answer 1

这是我设法实现的一个解决方案，就像默认颜色一样，它不会出现，但如果你输入两种不同的颜色（Label 和Background），它现在会很难看，它是唯一的我意识到的事情。我知道有些东西不见了，但我不知道是什么：

 .menu-button {

  -fx-pref-width: 250px;
  -fx-background-color: #72b3c9;

 }

 .menu-item {

   -fx-pref-width: 250px;

 }

 .menu-item > .label{

  -fx-pref-width: 200px;

 }

努力完善它，在我这边我会努力找到更好的解决方案，祝你好运！

Answer 2

这已经是一个非常古老的问题了，您可能已经找到了一些解决方案。但是我在这里给出我的答案，以便其他人可以发现它有用。

不要为.menu-item 或其子.menu-item > .label 设置任何宽度。仅在.accelerator-text 中设置填充，如下所示：

.menu-item > .accelerator-text {
    -fx-padding: 0 0 0 30px;
}

自定义左侧填充以调整菜单项的宽度。