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

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;
}

自定义左边距以调整菜单项的宽度。