XML：如何将项目（HBox/Vbox 的按钮）右对齐

Question

如标题所述。

我的尝试：

<VBox>  
    <HBox alignItems="Right" id="Tabelle">
        <Button visible="true" enabled="true" icon="sap-icon://navigation-right-arrow" />
        <Button visible="true" enabled="true" icon="sap-icon://open-command-field" />
        <Button visible="true" enabled="true" icon="sap-icon://process" />
    </HBox>
</VBox>

在右侧添加一个 alignItems -> 以便 Hbox 的元素将放在 VBox 的右侧，但它似乎不起作用。

为什么不起作用？

Answer 1

尝试使用 alignContent 而不是 alignItems 或两者的组合。似乎两者都有一些影响。

您也可以查看 HBox API 文档

Answer 2

我能推荐的最好的控件FlexBox

<FlexBox
    alignItems="Center"
    justifyContent="End">
    <items>
        <Button enabled="true" icon="sap-icon://navigation-right-arrow" class="sapUiSmallMarginEnd"/>
        <Button enabled="true" icon="sap-icon://open-command-field" class="sapUiSmallMarginEnd"/>
        <Button enabled="true" icon="sap-icon://process" />
    </items>
</FlexBox>

输出

Answer 3

HBox（和 VBox）基本上是一个 Flexbox，要将内容放在正确的位置，请使用 justifyContent 而不是 alignContent 或 alignItems。

<HBox justifyContent="End" id="Tabelle">
    <Button visible="true" enabled="true" icon="sap-icon://navigation-right-arrow" />
    <Button visible="true" enabled="true" icon="sap-icon://open-command-field" />
    <Button visible="true" enabled="true" icon="sap-icon://process" />
</HBox>

Example

Flexbox 定位的好参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑 1：添加示例编辑 2：语法和拼写错误

XML：如何将项目（HBox/Vbox 的按钮）右对齐

XML: how to align the items (Buttons of an HBox/Vbox) to the Right

javascript

xml

icons

sapui5

right-align