Javascript GWT VerticalPanel在第一个小部件后未与顶部对齐

我正在尝试创建一个GWT结构，如下所示：

   * RootLayoutPanel
   * --FlowPanel
   * ----VerticalSplitPanel left 
   * ------VerticalPanel top 
   * --------HorizontalPanel top 
   * ----------ListBox top 
   * --------TextArea top 
   * ------VerticalPanel bottom 
   * --------HorizontalPanel bottom 
   * ----------ListBox bottom 
   * --------TextArea bottom 

只要我去掉文本区域，一切都正常。当我添加它们时，它们在水平面板下的垂直面板中居中，而不是与顶部对齐。复选框也是一样

如果我查看正在呈现的HTML，我会看到HorizontalPanel下的填充。我试过：

   leftTopHorizontalPanel.getElement().getStyle().setPadding(0,Unit.PX);

   leftTopVerticalPanel.setVerticalAlignment(VerticalPanel.ALIGN_TOP);

及

他们俩都没做什么。我试过：

   leftTopHorizontalPanel.getElement().getStyle().setPadding(0,Unit.PX);

   leftTopVerticalPanel.setVerticalAlignment(VerticalPanel.ALIGN_TOP);

这也没什么作用。我以为所有添加到VerticalPanel的小部件在默认情况下都会继续与顶部对齐？建议

编辑：这里有一张图片显示了我的意思。注意，复选框在下拉列表下方居中，而不是直接在下拉列表下方。当我调整分隔符时，复选框保持居中

以下是创建图像的代码：

private FlowPanel createWatchlistsTab() {
    // FlowPanel will wrap its children as its width resizes with the window
    final FlowPanel flowPanel = new FlowPanel();

    // *********************** LEFT VERTICAL SPLIT PANEL ***************************
    SplitLayoutPanel leftVerticalSplitPanel = new SplitLayoutPanel();
    leftVerticalSplitPanel.setSize("30%", "600px");

    // SplitLayoutPanels render as a div. Divs are block elements which always start on a new line.
    // Hence they won't wrap in the FlowPanel unless you make them inline-block, as below.
    leftVerticalSplitPanel.getElement().getStyle().setDisplay(Display.INLINE_BLOCK);

    // create the toolbar at the top of the left VerticalSplitPanel
    HorizontalPanel leftTopHorizontalPanel = new HorizontalPanel();
    leftTopHorizontalPanel.setWidth("100%");
    leftTopHorizontalPanel.setHeight("25px");
    // leftTopHorizontalPanel.getElement().getStyle().setPadding(0,Unit.PX);

    // create a ListBox, add items, then add it to the HorizontalPanel
    ListBox watchlistDropDown = new ListBox();
    watchlistDropDown.addItem("My Portfolio");
    watchlistDropDown.addItem("Buy Watch");
    leftTopHorizontalPanel.add(watchlistDropDown);

    // create dummy TextArea to be added to the VerticalPanel under the ToolBar
    TextArea leftTopTextArea = new TextArea();
    leftTopTextArea.setWidth("98%");
    leftTopTextArea.setHeight("100%");
    leftTopTextArea.setText("dummy text to show left top widget");
    leftTopTextArea.getElement().getStyle().setPadding(0, Unit.PX);

    // create a VerticalPanel and add the HorizontalPanel and TextArea
    VerticalPanel leftTopVerticalPanel = new VerticalPanel();
    // leftTopVerticalPanel.setVerticalAlignment(VerticalPanel.ALIGN_TOP);
    leftTopVerticalPanel.setWidth("100%");
    leftTopVerticalPanel.setHeight("100%");
    leftTopVerticalPanel.add(leftTopHorizontalPanel);
    CheckBox cb = new CheckBox("checkbox");
    leftTopVerticalPanel.add(cb);
    // leftTopVerticalPanel.add(leftTopTextArea);

    // add the VerticalPanel to the left top SplitPanel
    leftVerticalSplitPanel.addNorth(leftTopVerticalPanel, 200);
    int minWidth = 200;
    // leftVerticalSplitPanel.setWidgetMinSize(leftTopVerticalPanel, minWidth);
    leftVerticalSplitPanel.setWidgetMinSize(leftTopVerticalPanel, minWidth);

    // add notes TextArea to left bottom VerticalSplitPanel
    TextArea leftBottomTextArea = new TextArea();
    leftBottomTextArea.setWidth("98%");
    leftBottomTextArea.setHeight("100%");
    leftBottomTextArea.setText("dummy text to show left bottom widget");
    leftVerticalSplitPanel.add(leftBottomTextArea);

    // add the left VerticalSplitPanel to the FlowPanel
    flowPanel.add(leftVerticalSplitPanel);

（

leftTopVerticalPanel

）呈现为

将其高度设置为100%：

leftTopVerticalPanel.setHeight("100%");

这样就可以填充（

leftVerticalSplitPanel

）北部的所有可用空间

因此，

垂直拉伸，因此其行也均匀拉伸

请参见下面的DOM结构：

---

用

setHeight（“100%”）注释掉该行

，您的复选框将直接位于下拉列表下：

---

通过创建类似的结构，我无法复制您提到的行为。请将您的代码添加到问题中，也许还有一个屏幕截图，其中解释了您想要实现的更改。我添加了一张图片。我将努力获取相关代码。谢谢你，亚当。我将垂直面板的高度设置为移动分隔器时展开或收缩。因此，我认为应该设置为100%。我不明白为什么不应该。但你是对的，它是有效的。