<vaadin-horizo​​ntal-layout> 是垂直的，而不是水平的

Posted 2023-02-23

【中文标题】<vaadin-horizo​​ntal-layout> 是垂直的，而不是水平的

【英文标题】：<vaadin-horizontal-layout> is vertical, not horizontal

【发布时间】：2021-09-24 15:10:22

【问题描述】：

我有一个关于 Vaadin 组件的问题。我已经使用它们的声明性 API (html API) 成功地将它们添加到静态网页中。 （参见 https://web-call.cc/ 。）元素的 HTML API (https://vaadin.com/components/vaadin-ordered-layout/html-examples) 显示如下用法：

<vaadin-horizontal-layout>
  <div>Item 1</div>
  <div>Item 2</div>
</vaadin-horizontal-layout>

但我必须添加样式display: flex; 以使布局水平。为什么我必须这样做？ （我从使用 Chrome 中的开发工具查看布局获得了这个想法，它显示了具有该样式的水平布局。）当我为水平布局和垂直布局添加该样式规则时，垂直布局也变成了水平的！文档没有显示应用于布局的样式；仅适用于这些布局中包含的项目。我错过了什么吗？

【参考方案1】：

布局不正常的原因是我忘记了这些导入：

import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout.js'
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout.js'```

【讨论】：

当我看到这篇文章被发布时，我正要写这个也作为答案。请注意，您还缺少同一页面上 <vaadin-list-box> 元素的导入。