Question

UiBinder中有以下代码

<div class="{style.flowInline}">
   <div class="{style.flowInline}" ui:field="text1Div" />
   <g:Image ui:field="image1" addStyleNames="{res.css.flowInline}" />
   <div class="{style.flowInline}" ui:field="text2Div" />
   <g:Image ui:field="image2" addStyleNames="{res.css.flowInline}" />
</div>

在Css

.flowInline
{
    display:inline-block;
}

这是要求。我希望 text1，image1，text2，image2 在同一行中流动。

text1Div.setInnerSafeHtml(SafeHtmlUtils.fromSafeConstant("Please:<BR/> Click"));
text2Div.setInnerSafeHtml(SafeHtmlUtils.fromSafeConstant("and<BR/> Click"));

它应该显示结果：

Please:
Click [image1] and
Click [image2]

但不知怎的，它不起作用

如果我在UiBinder中不使用Div

<div>
   Please: <BR/>
   Click <g:Image ui:field="image1" /> and <BR/>
   Click <g:Image ui:field="image2" />
</div>

然后它工作正常

那么，如何修复呢？

Answer 1

只是将它们放在一起但是使用浮动代替它，它的效果非常好。清除浮动的样式将清除前一个元素的浮动。你也可以简单地使用clear：left。我更喜欢浮动显示：内联块。我只是键入了这个，所以可能会有一些错误，但我认为会得到这个想法。

<style>

.left {
  float: left;
}
</style>

<div>
   <label> Please: </label> <br />
   <div>
      <label style="float:left">Click</label>
      <g:Image ui:field="image1" addStyleNames="{style.left}" />
      <label class="{style.left}">and</label>
      <br style="clear:both" />
      <label style="float:left">Click</label>
      <g:Image ui:field="image2" addStyleNames="{style.left}" />
   </div>
   <br style="clear:both" />
</div>

如何使Div和Image在GWT中内联？

1 个答案: