java - 如何在 GWT 中独立于 DockPanel.CENTER 设置 DockPanel.NORTH 元素的样式

Question

在我的 GWT 应用程序中，我使用了一个停靠面板，其中 DockPanel.NORTH 是一个 MenuBar 组件，实现了我的导航栏，而 中的组件DockPanel.CENTER位置根据导航栏中选择的选项显示不同的面板(是一个DeckPanel)。

我的问题是 DockPanel.NORTH 上的导航栏总是左对齐。当 DeckPanel 切换到更宽的组件时，导航栏也会移动。因此，对于 DeckPanel 中的每个面板，导航栏可能位于不同的位置，这对用户来说很烦人。 DockPanel.NORTH 中的这个组件可以始终居中，但似乎我可以将 DockPanel 本身居中，但不能将 中的组件居中>DockPanel.NORTH.

此 DockPanel 中的所有组件均采用

.navigationPanel{
    margin-left: auto;
    margin-right: auto;
    text-align:justify;
}

MenuBar 项的 GWT UI Binder 是:

<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:MenuBar ui:field="mainMenu"/>
    </g:Dock>
</g:DockPanel>

我试过使用其他属性，例如 .setHorizo​​ntalAlignment(HasHorizo​​ntalAlignment.ALIGN_CENTER); 但没有成功。或者，我无法为

调整正确的属性

.gwt-MenuBar{
    align: center !important;
}

MenuBar 组件 UiBinder 接口(interface)的样式属性。

谁能帮我改正这个行为？

Answer 1

只是一个可能有帮助的想法，没有看到整个模板就不知道了。尝试将菜单栏包装在 SimplePanel 或 FlowPanel 中，并为 display:block 添加样式。这只是一个猜测，因为我不完全确定您的问题是什么样的。您还应该在 DockPanel 上设置一个宽度，以防止它一直调整大小。最好它有一个宽度，这样它就知道最初将菜单栏居中的位置。否则它会在容器增大或收缩时移动。

<style>

.menubar-wrapper {
  width: 100px;
  margin: 0 auto;
}
</style>


<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:SimplePanel styleName="{style.menubar-wrapper}">
            <g:MenuBar ui:field="mainMenu"/>
        </g:SimplePanel>
    </g:Dock>
</g:DockPanel>

如果这没有帮助，您可以尝试为 float:left 添加样式到菜单栏；