css - ubicación - ¿Cómo justificar los aceleradores de elementos de menú para el ancho de menú diferente?

menu horizontal html5

Question

Mi menu-button es un poco más ancho:

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

y el menú con sus elementos (y sus aceleradores) se muestra como se esperaba, como este:

Pero cuando quiero alinear el ancho del menu-item con el ancho del menu-button , de esta manera:

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

entonces no consigo los aceleradores alineados a la derecha de los elementos del menú:

Lo que me gustaría (y espero) es que los aceleradores sigan el ancho del elemento del menú y que estén alineados con los bordes derechos de sus respectivos elementos de menú, como este:

¿Cómo puedo lograr eso?

Editar:

Se podría usar un truco para aumentar el relleno de la etiqueta izquierda, forzando así a los aceleradores a la derecha:

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

Pero, ese es un enfoque dependiente de la plataforma codificado que debe ajustarse cada vez que se cambia el texto de la etiqueta de un elemento de menú o un acelerador.

Answer 1

Aquí hay una solución que logré lograr, así con el color predeterminado no aparecerá, pero si colocas dos colores diferentes (para Label y Background ) será feo porque ahora es lo único que me di cuenta. Sé que falta algo, pero no puedo entender qué:

 .menu-button {

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

 }

 .menu-item {

   -fx-pref-width: 250px;

 }

 .menu-item > .label{

  -fx-pref-width: 200px;

 }

Intenta perfeccionarlo, por mi parte intentaré encontrar una mejor solución, ¡buena suerte!