Question

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

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

justify-content: flex-end;

其他许多人。没有结果。如果有人使用CSSLayout，有没有办法在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水平对齐组件？

1 个答案: