GWT组件在Horizo​​ntalPanel上的间距

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>s代替表。