Интервал между компонентами 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> s вместо таблицы.