水平面板GWT中的对齐

我想在水平面板中将一些按钮向左对齐

这是我的示例代码

模块加载（）上的公共void{
水平面板按钮面板=新水平面板（）；
按钮test1=新按钮（“test1”）；
按钮测试2=新按钮（“测试me”）；
按钮面板。设置水平对齐（哈希水平对齐。左对齐）；
按钮面板设置宽度（“100%”）；
按钮面板添加（test1）；
按钮面板添加（Test2）；
RootPanel.get（“buttoncontainer”）.add（ButtonCPanel）；
}

---

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

问题如下：

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

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

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

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

---

问题如下：

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

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

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

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

---

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

myPanel.addStyleName("menuPanel");

添加此CSS规则：

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

---

如果将标签用作按钮，请在CSS规则中使用div而不是input；如果将图像用作按钮，请使用img。

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

myPanel.addStyleName("menuPanel");

添加此CSS规则：

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

---

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

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

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

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

---

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

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

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

---

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

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

.button左键
{
浮动：左；
左：100%；
}

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

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

---

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

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

.button左键
{
浮动：左；
左：100%；
}

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

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

---

那很有帮助，谢谢。但是现在按钮中的单词不再在一行中。例如，如果按钮中有两个单词，它们显示在两行中，请尝试使用setWidth函数显式设置按钮的宽度，以便文本可以适合按钮宽度。另外，将水平面板的高度设置为固定大小也是一个很好的做法。这非常有帮助，谢谢。但是现在按钮中的单词不再在一行中。例如，如果按钮中有两个单词，它们显示在两行中，请尝试使用setWidth函数显式设置按钮的宽度，以便文本可以适合按钮宽度。另外，将水平面板的高度设置为固定大小也是一种很好的做法。