如何使用CSS

Question

我第一次使用Vaadin CssLayout API是我想要的：

这是我得到的：

这是我的代码：

    footerCssLayout = new CssLayout();
    footerCssLayout.addStyleName("my-panel-theme");

    footerCssLayout.setWidth(SIZE_100_PERCENT);

    footerCssLayout.setMargin(false, true, false, true);

    totalLabel.setWidth("50%");
    totalAmountLabel.setWidth("50%");

    footerCssLayout.addComponent(totalLabel);
    footerCssLayout.addComponent(totalAmountLabel);

所以我需要把2个字段放在同一行。我认为在阅读CssLayout vaadin规范之后，这些字段将被水平放置：

  

默认情况下，CssLayout的display属性是内联块，因此组件将按照另一个水平布局。 CssLayout默认为100％宽度。如果组件达到布局的宽度，它们将被包裹到下一行＆＃34; line＆＃34;正如文本一样。如果添加宽度为100％的组件，则在组件之前和之后进行包装将占用整行。

这里是CssLayout Vaadin specification document

Answer 1

解决方案是：

totalLabel.addStyleName("myStyle")
totalAmountLabel.addStyleName("myStyle");

然后在css：

.myStyle {
    width: 50%;
    float: left;
}