水平面板GWT中的对齐

Question

我想在Horizo​​ntalPanel中将一些按钮对齐到左边。

这是我的示例代码。

 public void onModuleLoad() {

        HorizontalPanel buttonsPanel = new HorizontalPanel();

        Button test1 = new Button("Test1");
        Button Test2 = new Button("Test me ");
        buttonsPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
        buttonsPanel.setWidth("100%");
        buttonsPanel.add(test1);
        buttonsPanel.add(Test2);
        RootPanel.get("buttoncontainer").add(buttonsPanel);

    }

但是通过这种方式，这些按钮之间有很多空间。但我希望他们能够团结在一起。有什么建议 ？

Answer 1

我建议使用FlowPanel而不是Horizo​​ntalPanel。对于流畅的页面布局，它几乎总是更好的选择。将您的按钮添加到FlowPanel并设置

myPanel.addStyleName("menuPanel");

添加此CSS规则：

.menuPanel input {
    float: left;
    margin-right: 10px;
}

如果使用标签看起来像按钮，则在CSS规则中使用div而不是输入;如果使用图像作为按钮，则使用img。

Answer 2

问题如下：

当您将项目放入宽度超过内部项目的通用宽度的水平面板中时，项目的放置将在水平面板指定的区域内完成。

因此，在这种情况下，如果你想将它们粘在一起，将水平面板的起始宽度设置为0px，当你添加chidren按钮时，它将扩展到容器允许的范围。

HorizontalPanel buttonsPanel = new HorizontalPanel();

Button test1 = new Button("Test1");
Button Test2 = new Button("Test me ");
//You do not need the next line.
//buttonsPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
buttonsPanel.setWidth("0px");
buttonsPanel.add(test1);
buttonsPanel.add(Test2);
RootPanel.get("buttoncontainer").add(buttonsPanel);

Answer 3

我的建议如下，以便我们可以选择将整个面板对齐到您想要的位置，同时保持这些按钮彼此相邻。

HorizontalPanel buttonsPanel = new HorizontalPanel();

        // set your width here, at what position we want to see your panel. 
        // I set 100%, so that it occupies entire width.
        buttonsPanel.setWidth("100%");
        buttonsPanel.setTableWidth("100%");
        Button test1 = new Button("Test1");
        Button test2 = new Button("Test2");

        TableData test1layoutData = new TableData();

        test1layoutData.setHorizontalAlign(HorizontalAlignment.RIGHT);
        TableData test2layoutData = new TableData();
        test2layoutData.setHorizontalAlign(HorizontalAlignment.LEFT);
        buttonsPanel.add(test1,test1layoutData);
        buttonsPanel.add(test2,test2layoutData);

RootPanel.get("buttoncontainer").add(buttonsPanel);

屏幕截图:(忽略图表，只查看底部的按钮）

Answer 4

使控件向右或向左对齐的最佳方法是编写两行CSS，如下所示：

.buttonToLeft
{
    float: left;
    left: 100%;
}

然后按如下方式将它们分配给控件：

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToLeft");