Wie Komponenten mit CSS horizontal angezeigt

Question

ich die Vaadin CssLayout API zum ersten Mal bin mit hier ist, was ich zu bekommen:

Hier ist, was ich erhalte:

Hier ist mein Code:

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); 

Also muss ich die 2 Felder in die gleiche Zeile setzen. Ich dachte, dass die Felder horizontal gelegt werden, nachdem die CssLayout Vaadin Spezifikation Lesen:

Die Display Attribut CssLayout ist inline-block standardmäßig, so dass die Komponenten werden horizontal mit einer anderen gelegt. CssLayout hat standardmäßig eine Breite von 100%. Wenn die Komponenten die Breite des Layouts erreichen, werden sie zur nächsten "Zeile" umgebrochen, genau wie Text. Wenn Sie eine Komponente mit 100% Breite hinzufügen, wird eine ganze Zeile benötigt, indem Sie vor und nach der Komponente umbrechen.

Hier ist die CssLayout Vaadin specification document

Answer 1

Die Lösung lautet:

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

dann in CSS:

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