时间戳

首页 > 解决方案 > 如何在 Horizo​​ntalLayout 中调整 Vaadin 组件的垂直对齐方式？

vaadin - 如何在 Horizo​​ntalLayout 中调整 Vaadin 组件的垂直对齐方式？

问题描述

我想将按钮与文本字段对齐在同一行。项目对齐已设置为Alignment.CENTER，但正如您从图像中看到的那样，TextFields 的垂直中心较低，因为它们顶部的标签。

    HorizontalLayout horizontalLayout = new HorizontalLayout();
    horizontalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
    Div div = new Div(buttonAddPriceRange);
    horizontalLayout.add(spanneVon, spanneBis, div);

在此处输入图像描述

标签： vaadinvaadin-flow

解决方案

layout.setAlignItems(Alignment.BASELINE);允许您按基线对齐项目，即与底部对齐。

文本字段和按钮基线对齐

HorizontalLayout hl = new HorizontalLayout(new TextField("hello"),
    new Button("world"));
hl.setAlignItems(Alignment.BASELINE);
add(hl);

查看精彩视频Master Vaadin VerticalLayout 和 Horizo​​ntalLayout - Vaadin Flow 中的布局以了解更多信息。

推荐阅读