Question

我正在尝试将我的UiBinder定义的小部件显示为内联，但我不能。我目前的代码是：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .section {
      border: 1px solid #000000;
      width: 330px;
      padding: 5px;
      display: run-in;
    }
  </ui:style>

  <g:HTMLPanel>
    <div class="{style.section}">
      <div ui:field="titleSpan" class="{style.title}" />
      <div class="{style.contents}">
        <g:VerticalPanel ui:field="messagesPanel" />
      </div>
    </div>
  </g:HTMLPanel>
</ui:UiBinder>

这在窗口小部件内部的外观方面工作正常，但我想将一堆这些小部件放入FlowPanel并在调整窗口大小时让它们流动。 HTMLPanel是一个div，但我无法获取要分配的display属性。我无法强制使用样式名称，因为以下内容会引发错误：

<g:HTMLPanel styleNames="{style.section}">

我可以指定其他样式，但不适用显示设置。

<g:HTMLPanel addStyleNames="{style.section}">

这会显示边框并按预期设置大小，但它不会流动。 Firebug显示div上的样式是边框，宽度和填充，但没有显示。

有没有办法在UiBinder中制作一个小部件，以便它显示内联而不是块？如果是这样，我是否可以使其与内部的VerticalPanel兼容（我是否可以在不使用任何GWT小部件的情况下使整个小部件纯HTML完成）？

PS ：我看到问题2257924但最近没有得到任何答案，他似乎专注于获取标签，而不是专门获取内联布局。我不直接关心，如果我能让我的小部件的顶级标签流入内联，我很高兴。

Answer 1

您的问题似乎是由于使用display: run-in而不是更“标准”display: inline造成的。 IE 和 Firefox不支持run-in，似乎Firebug在添加时修剪了样式。

尝试将样式更改为display: inline（或inline-block，如果您想要某个块的某些属性，例如宽度，但要注意IE + inline-block的{{3}}）

Answer 2

它应该是<g:HTMLPanel styleName="{style.section}">，而不是<g:HTMLPanel styleNames="{style.section}"> - styleNames是一个拼写错误（出现在UiBinder文档中，所以我确定这是你得到它的地方）。 styleName是正确的用法。

另外，Igor Klimer是正确的，你应该使用display: inline或display: inline-block而不是display: run-in。

通常，您可以通过在UIObject类上查找setXXX方法来告知可用的属性名称，并且属性名称只是XXX。因此，UIObject有一个setStyleName方法，您可以使用名为styleName的属性访问该方法。

获取UiBinder小部件以显示内联而不是块

2 个答案: