如何水平对齐 Vaadin7 中的 CSSLayout 组件？

Question

我需要使用 CssLayout。我有几个组件。无论我做什么，我都找不到将这些组件右对齐的方法。

在我的主题中我使用了这个：align-content: flex-end; 或者这个

justify-content: flex-end;

在许多 others.No 结果中。如果有人使用 CSLayout，有没有办法在 Vaadin7 中对齐组件？

private Component addUpperStripe() {
    CssLayout cssLayout = new CssLayout();
    cssLayout.setWidth("100%");
    cssLayout.setStyleName("stripestyle");

    Label userNameLabel = new Label("User:" + currentUserName);
    userNameLabel.setSizeUndefined();
    cssLayout.addComponent(userNameLabel);
    userNameLabel.setStyleName("leftPosition");

    Label dateLabel = new Label(new Date().toString());
    dateLabel.setSizeUndefined();
    cssLayout.addComponent(dateLabel);
    dateLabel.setStyleName("centerPosition");

    Label versionLabel = new Label("Version:" + versionString);
    versionLabel.setSizeUndefined();
    cssLayout.addComponent(versionLabel);
    versionLabel.setStyleName("rightPosition");

    return cssLayout;
}




 .stripestyle {
       background-color: #336699;
       line-height: 36px;
       vertical-align: bottom;
       align-content: space-between;
    }




  .rightPosition {
     ? WHAT TO WRITE HERE??????????????????
   }

   .leftPosition {
   }

   .centerPosition {
   }

Answer 1

使用 float 和 text-align 属性对齐 CssLayout 内的组件。 SSCCE:

@Override
protected void init(VaadinRequest request) {
    setContent(addUpperStripe());
}

private Component addUpperStripe() {
    CssLayout cssLayout = new CssLayout();
    cssLayout.setWidth("100%");
    cssLayout.setStyleName("csslayout");

    Label userNameLabel = new Label("LEFT");
    userNameLabel.setSizeUndefined();
    cssLayout.addComponent(userNameLabel);
    userNameLabel.setStyleName("leftPosition");

    Label dateLabel = new Label("MID");
    dateLabel.setSizeUndefined();
    cssLayout.addComponent(dateLabel);

    Label versionLabel = new Label("RIGHT");
    versionLabel.setSizeUndefined();
    cssLayout.addComponent(versionLabel);
    versionLabel.setStyleName("rightPosition");

    return cssLayout;
}

和styles.scss：

  .csslayout{
    text-align: center;
  }
  .leftPosition{
    float: left;
  }
  .rightPosition{
    float: right;
  }

如何水平对齐 Vaadin7 中的 CSSLayout 组件？

How to horizontally align component with CSSLayout in Vaadin7?

css

vaadin

vaadin7