Question

我正在使用ui binder将元素放在GWT页面上，但我无法正确放置它们。根据我的知识，流程面板中的元素应该出现在水平线上，但它们出现在垂直线上。

<g:FlowPanel>
  <g:Label ui:field="searchLabel" text="{labels.searchFor}"> </g:Label>
  <g:ListBox ui:field="searchListBox"></g:ListBox>
</g:FlowPanel>
<g:SimplePanel addStyleNames="{cres.style.textAlignCenter}">
  <g:Button ui:field="searchButton" text="{clabels.search}"/>
</g:SimplePanel>

Answer 1

FlowPanel只是一个简单的div元素的（小部件）包装器。所有子窗口小部件将按照标准HTML行为自然流（即，块和内联元素都显示为这样）。

相反，Label窗口小部件不是HTML label元素的包装器。同样，是div，所以所有内容都会在FlowPanel。

中叠加

你可以：

使用InlineLabel代替Label（将呈现为span元素）;
在float上使用Label样式或任何其他CSS技巧，使两个div水平对齐;
使用HTMLPanel代替FlowPanel（它们的行为相同），并使用HTML格式化元素，例如标签之类的简单内容（即混合搭配HTML和Widgets） ;
使用HorizontalPanel代替FlowPanel（但这将呈现为table元素，请注意。

Answer 2

流程面板工作有些奇怪。将不会安排流程中的所有元素。只有一些元素它将按预期工作。例如按钮。如果块级元素与垂直面板相同。例如，如果要在流面板中插入两个水平面板，则它与垂直面板中的内容相同。要实现并排安排，您必须使用CSS Float风格。

Answer 3

标签周围是<div> - 标签。如果没有css样式，则每个<div> - 标记都有一个换行符。

使用：

searchLabel.getElement().getStyle().setFloat(Style.Float.LEFT);

避免换行。

如何在GWT中的Flowpanel上放置元素

3 个答案: