css - horizontally align controls in gwt bootstrap

Question

I'm attempting to horizontally align two controls (namely the Checkbox and Nav) in a Controlgroup's controls section. However, I can't find a way to prevent their vertical alignment.

<b:ControlGroup>
   <b:Controls controlsRow="true">
      <b:CheckBox ui:field="tosCheckBox" text="I accept the " />
      <b:Nav>
         <b:NavLink href="" text="Terms of Use" />
      </b:Nav>
   </b:Controls>
</b:ControlGroup>

Aligning two checkboxes horizontally is possible with 'Inline'. But in this case I want to horizontally align the checkbox and Nav. And Nav doesn't support Inline. I noticed by default listboxes are also horizontally aligned in a Control's group

Answer 1

创建以下两个类 InlinePanel 和 InlineBlock

public class InlinePanel extends UnorderedList {
    public static final String inline = "inline";

    public InlinePanel() {
        super();

        addStyleName(inline);
    }
}

public class InlineBlock extends ListItem {

}

然后相应地调整您的代码：

<a:InlinePanel>
  <a:InlineBlock>
    <b:CheckBox ui:field="tosCheckBox" text="I accept the " />
  </a:InlineBlock>
  <a:InlineBlock>
    <b:Nav>
     <b:NavLink href="" text="Terms of Use" />
  </b:Nav>
  </a:InlineBlock>
</a:InlinePanel>

这应该够了吧。