由网友(你不是我，所以不用懂我╰)分享简介：我使用GWT 2.4和UiBinder的要小部件添加到页面。现在我想布局两个底部按钮，在一排，但我不知道要做到这一点的正确方法。 I'm using GWT 2.4 and uiBinder to add widgets to a page. Now I want to layout two bottom butt...

我使用GWT 2.4和UiBinder的要小部件添加到页面。现在我想布局两个底部按钮，在一排，但我不知道要做到这一点的正确方法。

I'm using GWT 2.4 and uiBinder to add widgets to a page. Now I want to layout two bottom buttons in one row, but I'm not sure of the correct way to do this.

我尝试添加了horizo​​ntalPanel是这样的：

I tried adding in a horizontalPanel like this:

<tr>
   <td align="center">
      <g:HorizontalPanel ui:field="horizontalPanel" borderWidth="1" spacing="50">
         <g:Button ui:field="cancelButton" text="Cancel"></g:Button>
         <g:Button ui:field="exitButton" text="Exit"></g:Button>                    
    </g:HorizontalPanel>
   </td>
</tr>

但它没有间隔的按钮相距足够远。增大间距增加了更多高度面板和推动都记录下来走另一个按钮是它上面。

but it's not spacing the buttons far enough apart. Increasing the spacing is adding more height to the panel and pushing everything down away another button that is above it.

什么是正确的方式做到这一点？

What is the proper way to do this?

推荐答案

有，你可以去这样做你的布局GWT两种方式：

There are two ways you can go about doing your layout in GWT:

在依赖的SmartGWT或GXT。 硬着头皮学习CSS。

我建议人们去第二个路径。 SmartGWT的和GXT会显得一个简单的项目有吸引力。然而，随着项目变得越来越复杂，与所有其他GWT的好东西不兼容越走越宽的。

I advise people to go the 2nd path. smartgwt and gxt will seem attractive for a simple project. However, as your project gets more and more complex, the incompatibilities with all the other GWT goodies become wider and wider.

硬着头皮学习如何CSS集成到GWT。

Bite the bullet and learn how to integrate css into gwt.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .trivial {
      font-weight: bold;
      margin-left: 50px;
      margin-top: 0px;
      margin-right: 50px;
      margin-bottom: 0px;
    }
  </ui:style>
  <g:HorizontalPanel>
    <g:Button styleName="{style.trivial}" ui:field="button1">David Headley</g:Button>
    <g:Button styleName="{style.trivial}" ui:field="button2">Debacle</g:Button>
  </g:HorizontalPanel>
</ui:UiBinder>