Hilla前端框架中如何实现导航栏元素分左右对齐

要实现部分元素左对齐、部分右对齐，核心是确保HorizontalLayout拥有足够的宽度空间，再通过布局属性分配元素位置，具体方案如下：

• 首先给外层HorizontalLayout设置100%宽度，否则组件默认仅包裹内容宽度，justifyContent属性无法生效：

  <HorizontalLayout width="100%">
    <!-- 元素内容 -->
  </HorizontalLayout>
  

• 接着使用justifyContent="space-between"属性，将左侧元素推至容器左端，右侧元素推至容器右端，完美实现左右分布：

  <AppLayout>
    <HorizontalLayout 
      width="100%" 
      justifyContent="space-between" 
      alignSelf="center"
      padding="var(--lumo-space-m)"
    >
      <!-- 左对齐元素组 -->
      <Button variant="primary">首页</Button>
      <Button>文档</Button>
  
      <!-- 右对齐元素组 -->
      <HorizontalLayout spacing="sm">
        <Avatar name="用户头像" />
        <Button>退出登录</Button>
      </HorizontalLayout>
    </HorizontalLayout>
  </AppLayout>
  

• 额外说明：你之前尝试的style={{ justifyContent: "end" }}未生效，本质是因为HorizontalLayout没有占满父容器宽度，没有剩余空间让对齐规则发挥作用。只要先设置width="100%"，无论是通过组件属性还是style设置宽度，再配合justifyContent属性就能实现预期效果。

内容的提问来源于stack exchange，提问作者Vikrant Bhurke