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

【问题标题】：Get UiBinder widget to display inline instead of block获取 UiBinder 小部件以显示内联而不是块
【发布时间】：2010-03-19 22:48:16
【问题描述】：

我试图让我的 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，但我无法获取要分配的显示属性。我无法强制使用样式名称，因为以下会引发错误：

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

我可以指定一个额外的样式，但它不应用显示设置。

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

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

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

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

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

您的问题似乎是由使用display: run-in 而不是更“标准”的display: inline 引起的。 IE 和 Firefox 不支持 run-in 并且似乎 Firebug 在添加时会修剪样式。

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

【讨论】：

【解决方案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 的属性访问它。

【讨论】：