css - 内联 CSS 不适用于添加的小部件

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 使用 a <div>，默认情况下显示为块，而 InlineLabel 使用 a <span>。

Answer 2

我希望我的验证小部件在标签之后显示内联。但无论我做什么都不会。为什么？

您目前正在制作容纳它们的容器inline。要使单个元素内联，您可以（确保仅应用以下解决方案之一；同时应用两者都不起作用）：

(1)通过将样式更改为：将CSS 类的子validationField类设置为内联显示：

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

(2)通过将 UiBinder XML 更改为：仅validationField将CSS 类应用于您的ValidationFieldGWT 小部件：

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