gwt - 水平面板 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);

    }

但是这样一来，这些 Button 之间就有了很大的空间。但我希望他们团结在一起。有什么建议么 ？

Answer 1

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

myPanel.addStyleName("menuPanel");

添加此 CSS 规则：

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

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

Answer 2

问题如下：

当您将项目放置在比内部项目的共同宽度更宽的水平面板中时，项目的放置将在水平面板指定的区域内完成。

因此，在这种情况下，如果您想将它们粘在一起，请将水平面板的起始宽度设置为 0px，当您添加儿童按钮时，它将尽可能扩大容器所允许的范围。

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");