Question

我似乎无法弄清楚为什么我添加的小部件不会显示内联。我希望我的验证小工具在标签后显示内联。但不管我做什么都不会。为什么呢？

<ui:UiBinder
 xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:validation='urn:import:com.versature.vsm.client.ui.validation'>

<ui:style>
.validationField {
    display:inline-block;
}
</ui:style>

<g:HTMLPanel ui:field="mainPanel">
     <div class="{style.validationField}">
         <g:Label text="ACCOUNT NUM:"/> 
         <validation:ValidationField ui:field="accountNumberValidation"/>
     </div>
</g:HTMLPanel>

Answer 1

将<g:Label>替换为<g:InlineLabel>。

Label使用<div>，默认显示为块，而InlineLabel使用<span>。

Answer 2

我希望我的验证小工具在标签后显示内联。但不管我做什么都不会。为什么呢？

您目前正在制作容器，同时保存inline。要使各个元素内联，您可以（确保只应用以下解决方案之一;同时应用它们）：

（1）通过将您的样式更改为：

，将validationField CSS类的子设置为内联显示

<ui:style>
.validationField * {
    display:inline-block;
}
</ui:style>

（2）通过将UiBinder XML更改为： validationField CSS类仅应用于ValidationField GWT窗口小部件 >

<g:HTMLPanel ui:field="mainPanel">
     <g:Label text="ACCOUNT NUM:"/> 
     <validation:ValidationField ui:field="accountNumberValidation" stylePrimaryName="{style.validationField}"/>
</g:HTMLPanel>

内联CSS不适用于添加的Widget

2 个答案: