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>

我尝试过使用其他属性，例如.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);但没有成功。要么，我还没能调整

的正确属性

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

MenuBar组件UiBinder界面上的样式属性。

有人可以帮我纠正这种行为吗？

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;

添加样式

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

1 个答案: