如何使用 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);

所以我需要将这两个字段放在同一行中。看了CssLayout vaadin规范，我以为字段会水平放置：

The display attribute of CssLayout is inline-block by default, so the components are laid out horizontally following another. CssLayout has 100% width by default. If the components reach the width of the layout, they are wrapped to the next "line" just as text would be. If you add a component with 100% width, it will take an entire line by wrapping before and after the component.

这是CssLayout Vaadin specification document

Answer 1

解决方法是：

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

然后在css:

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

如何使用 CSS 水平显示组件

How to display components horizontally with CSS

html

css

vaadin