Horizo​​ntalPanel上的GWT组件间距

Question

我有以下代码来布局我的页面的菜单：

//Header Conainer Panel
VerticalPanel headerWidget = new VerticalPanel();
headerWidget.setWidth("100%");


//Header Panel
HorizontalPanel headerPanel = new HorizontalPanel();
headerPanel.setStyleName("header");
headerPanel.setWidth("100%");
Label title = new Label("Information System");
title.setStyleName("componentgap");
headerPanel.add(title);
headerWidget.add(headerPanel);

//Menu 1 Panel
HorizontalPanel menu = new HorizontalPanel();
menu.setStyleName("menu1");
menu.setHorizontalAlignment(HorizontalPanel.ALIGN_LEFT);

Label componentLabel = new Label("Component");
componentLabel.setStyleName("componentgap");
componentLabel.setWidth("50px");
menu.add(componentLabel);

//Outbound Routing Menu Item
final Label outRouteMenu = new Label("Routing");
outRouteMenu.setWidth("75px");
outRouteMenu.setStyleName("menu1button");

我必须将headerPanel和headerWidget设置为100％，因为我希望顶页栏占据整个屏幕宽度。但是，当我在菜单中添加标签时，它们在屏幕上均匀分布，而不是在我想要的旁边彼此相邻。正如您所看到的，我尝试明确设置标签的宽度以强制它们更小，因此在菜单栏中彼此相邻。

我是如何实现这一目标的？你会看到我正在使用下面包含的样式，但会指出它们不会与组件的宽度相关。

谢谢，

詹姆斯

目前我有这样的事情：

CSS：

.header { 
        background-color:       #669966;
        border-bottom-color:    #003300;
        border-right-color: #003300;
        border-top-color:   #99CC99;
        border-left-color:  #99CC99;
        color:                  #FFFFFF;
        padding:                0px;
        border-style:           solid;
        border-width:           1px;
        margin:                 0px;
        font:                   bold 165% "Trebuchet MS",sans-serif;
        }

.menu1 {
        background-color:      #336633;
        border-bottom-color:   #003300;
        border-right-color:    #003300;
        border-left-color:     #99CC99;
        border-top-color:      #99CC99;
        color:                 #FFFFFF;
        padding:               0px;
        border-style:          solid;
        border-width:          1px;
        font:                  85% "Trebuchet MS",sans-serif;
       }

.menu1button {
             background-color:      #336633;
             border-bottom-color:   #003300;
             border-right-color:    #003300;
             border-left-color:     #99CC99;
             border-top-color:      #99CC99;
             color:                 #FFFFFF;
             padding:               0px;
             border-style:          solid;
             border-width:          0px;
             margin:                5px;
             font:                  85% "Trebuchet MS",sans-serif;
             }

.menu1selectedbutton {
             background-color:      #669966;
             border-bottom-color:   #003300;
             border-right-color:    #003300;
             border-left-color:     #99CC99;
             border-top-color:      #99CC99;
             color:                 #336633;
             padding:               0px;
             border-style:          solid;
             border-width:          0px;
             margin:                5px;
             font:                  85% "Trebuchet MS",sans-serif;
             }



.menu2 {
        color:#A6A6A6;
        padding: 0px;
        border-style:none;
        margin:0px;
        font: 85% "Trebuchet MS",sans-serif;
        }

.menu2button {
            color:#336633;
            padding: 0px;
            border-style:none;
            margin:5px;
            font: 85% "Trebuchet MS",sans-serif;
            }

.menu2selectedbutton { 
                        color:#336633;
                        background-color:     #669966;
                        padding: 0px;
                        border-style:none;
                        margin:5px;
                        font: 85% "Trebuchet MS",sans-serif;
                    }

.componentgap{
                margin: 4px;

}

Answer 1

您必须设置单元格的宽度（<td>），而不是单元格中小部件的宽度。所以在你的CSS中，你可以使用：

.header td { ... }

或者您可以使用API​​：

horizontalPanel.setCellWidth(horizontalPanel.getWidget(0), "0%");

另一种方法是使用<div>而不是表格。