如何使用 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 属性默认是 inline-block ，所以组件是水平依次排列的。默认情况下，CssLayout 具有 100% 的宽度。如果组件达到布局的宽度，它们将被包裹到下一个“行”，就像文本一样。如果你添加一个宽度为 100% 的组件，它会通过在组件之前和之后换行来占用一整行。

这是CssLayout Vaadin specification document

Answer 1

解决办法是：

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

然后在css中：

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