水平面板 GWT 中的对齐答案

【问题标题】：Alignment in Horizontal Panel GWT水平面板 GWT 中的对齐
【发布时间】：2012-10-11 08:37:58
【问题描述】：

我想在我的 HorizontalPanel 中将一些按钮向左对齐。

这是我的示例代码。

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

    }

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

【问题讨论】：

标签： gwt button

【解决方案1】：

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

myPanel.addStyleName("menuPanel");

添加此 CSS 规则：

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

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

【讨论】：

【解决方案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);

【讨论】：

这很有帮助，谢谢。但是现在按钮中的单词不再是一行。例如，如果按钮中有两个单词，它们将显示在两行中，
尝试使用 setWidth 函数明确设置按钮的宽度，以便文本适合按钮宽度。另外最好将 HorizontalPanel 的高度设置为固定大小。

【解决方案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);

屏幕截图：（忽略图表，只看底部的按钮）

【讨论】：

【解决方案4】：

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

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

然后将它们分配给控件，如下所示：

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

【讨论】：