0

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

    }

しかし、この方法では、これらのボタンの間に多くのスペースがあります。しかし、私は彼らが一緒に固執したい. 助言がありますか ？

4

4 に答える 4

3

Horizo​​ntalPanel の代わりに FlowPanel を使用することをお勧めします。流動的なページ レイアウトには、ほとんどの場合、これが適したオプションです。ボタンを FlowPanel に追加して設定します

myPanel.addStyleName("menuPanel");

次の CSS ルールを追加します。

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

ラベルを使用してボタンのように見せる場合は CSS ルールで入力の代わりに div を使用し、画像をボタンとして使用する場合は img を使用します。

于 2012-10-11T13:45:08.380 に答える
1

問題は次のとおりです。

内部のアイテムの累積幅よりも広い水平パネルにアイテムを配置すると、水平パネルで指定された領域内にアイテムが配置されます。

したがって、この場合、それらをくっつけたい場合は、水平パネルの開始幅を 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);
于 2012-10-11T10:25:12.450 に答える
0

コントロールを右または左に揃える最善の方法は、次のように 2 行の CSS を記述することです。

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

次に、次のようにコントロールに割り当てます。

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToLeft");
于 2015-04-23T14:10:49.753 に答える
0

私の提案は次のとおりです。これにより、パネル全体を好きな場所に配置するオプションを取得し、それらのボタンを互いに隣り合わせたままにします。

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

スクリーンショット: (チャートは無視して、一番下のボタンだけを見てください)

ここに画像の説明を入力

于 2015-01-05T13:21:17.670 に答える