使用 RootLayoutPanel 和 DockPanel 时如何设置 5% 的边距答案

【问题标题】：How to set a 5% margin when using RootLayoutPanel and DockPanel使用 RootLayoutPanel 和 DockPanel 时如何设置 5% 的边距
【发布时间】：2011-12-23 00:05:37
【问题描述】：

我一直在玩 GWT 2，但我发现很难获得我想要的基本页面布局。基本上，我使用的是 DocLayoutPanel，我在其中添加了北（页眉）、南（页脚）、西（导航）和内容区域。我希望文档面板占据页面的 90% 并居中。这将提供不错的 5% 利润。然而，由于 GWT 使用顶部、左侧、右侧和底部样式，它使用我的 (margin: auto) 居中的常规策略不起作用。

我怎样才能以 GWT 方式完成我想要的？

【问题讨论】：

标签： gwt layout css

【解决方案1】：

通过阅读您的问题，不清楚您在问什么，但我认为您希望整个 Dock 面板有 5% 的边距？

Gwt 2.0 中所有新的 *LayoutPanel 都使用 css 绝对定位，这就是为什么您会看到 top/left/right/bottom 样式。这就是为什么你的 margin:auto 策略不起作用。

DockLayoutPanel 实际上只是用于布局。我建议调整您放在 DockLayoutPanel 中的小部件的边距以达到您想要的效果。

我自己对此进行了尝试，我接近答案，但它并不完美。我将标签放入每个 DockPanel 中，边距为 10px，但右侧和底部边框不显示该边距。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>.label {
        background: #666;
        color: #fff;
        font-size: 14pt;
        padding: 5px;
        margin: 10px;
        height: 100%;
        width: 100%;
    }</ui:style>

<g:DockLayoutPanel unit='PCT'> 
        <g:north size='10'> 
                <g:Label addStyleNames="{style.label}">Top</g:Label> 
        </g:north> 
        <g:center> 
                <g:Label addStyleNames="{style.label}">Body</g:Label> 
        </g:center> 
        <g:west size='10'> 
                <g:Label addStyleNames="{style.label}">West</g:Label> 
        </g:west> 
        <g:south size="10"> 
                <g:Label addStyleNames="{style.label}">South</g:Label> 
        </g:south> 
</g:DockLayoutPanel>

【讨论】：

我现在觉得有点傻，但是没有使用 width 90% 和 margin: 0 auto;我切换到只给文档布局面板留出边距。到目前为止似乎在 ie6/ie8/firefox 3.5 中工作。由于您是唯一发布的人并且您有一个有趣的想法，因此您将获得投票和答案。谢谢。

【解决方案2】：

为 DockLayoutPanel 的父元素添加边距。例如，如果您将 DockLayoutPanel 添加到 RootLayoutPanel：

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
RootLayoutPanel rootPanel = RootLayoutPanel.get();
rootPanel.setStylePrimaryName("rootLayoutPanel");
rootPanel.add(dockLayoutPanel);

并添加 CSS

.rootLayoutPanel {
    margin: 5px;
}

【讨论】：