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

【问题标题】：XML: how to align the items (Buttons of an HBox/Vbox) to the RightXML：如何将项目（HBox/Vbox 的按钮）向右对齐
【发布时间】：2020-02-12 03:22:35
【问题描述】：

如标题所述。

我的尝试：

<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 的右侧，但它似乎不起作用。

为什么不工作？

【问题讨论】：

标签： javascript xml icons sapui5 right-align

【解决方案1】：

我可以推荐的最佳控件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>

输出

【讨论】：

感谢您的贡献！我需要它与 HBox 和 HBox justifyContent 一起工作

【解决方案2】：

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：语法和错别字

【讨论】：

【解决方案3】：

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

您也可以查看HBox API 文档

【讨论】：

感谢您的贡献！对于 HBox justifyContent 的功能比 alignContent 更好