Polymer 将纸张选项卡与纸张图标按钮、主标题和应用程序工具栏的右侧对齐

我试图实现一个类似的布局

这是我目前拥有的：

<app-header-layout bleeding>
            <app-header condenses reveals snaps shadow>
                <app-toolbar>
                    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                    <div main-title flex>My App</div>
                    <paper-tabs scrollable bottom-item selected="0">
                        <paper-tab>Tab 1</paper-tab>
                        <paper-tab>Tab 2</paper-tab>
                        <paper-tab>Tab 3</paper-tab>
                    </paper-tabs>
                </app-toolbar>
            </app-header>

然而，所有元素都显示在彼此的顶部，而不是一直向右

---

我能做些什么来解决这个问题？

您可以这样做：

<app-header-layout>
  <app-header>
    <app-toolbar>
      <paper-icon-button id="button" icon="menu" drawer-toggle></paper-icon-button>
      <div class="title" main-title>App name</div>
      <div class="bottom">
        <div class="flex"></div>
        <paper-tabs scrollable selected="0">
          <paper-tab>Tab 1</paper-tab>
          <paper-tab>Tab 2</paper-tab>
          <paper-tab>Tab 3</paper-tab>
        </paper-tabs>
      </div>
    </app-toolbar>
  </app-header>
  <div>
    main content
  </div>
</app-header-layout>

---

请注意，如果您真的想使用

可滚动

属性，则需要指定

纸张选项卡的宽度。否则，只需删除
minwidth
和
scrollable
属性就可以了。不要忘了导入iron flex布局。
您可以这样做：

<app-header-layout>
  <app-header>
    <app-toolbar>
      <paper-icon-button id="button" icon="menu" drawer-toggle></paper-icon-button>
      <div class="title" main-title>App name</div>
      <div class="bottom">
        <div class="flex"></div>
        <paper-tabs scrollable selected="0">
          <paper-tab>Tab 1</paper-tab>
          <paper-tab>Tab 2</paper-tab>
          <paper-tab>Tab 3</paper-tab>
        </paper-tabs>
      </div>
    </app-toolbar>
  </app-header>
  <div>
    main content
  </div>
</app-header-layout>

请注意，如果您真的想使用
可滚动
属性，则需要指定
纸张选项卡的宽度。否则，只需删除
minwidth
和
scrollable
属性就可以了。别忘了导入iron flex布局。
对不起。我必须进一步补充一点，我希望纸张标签一直向右对齐。对不起。我必须进一步补充一点，我希望纸张标签一直向右对齐。非常感谢。它现在起作用了。但是，不可单击。我不确定它是否相关。如果我完全删除，那么就可以再次单击。我找到了一个修复方法。我只是在底部加上左边的边距：100px。然而，这似乎是一个很大的缺陷。我希望Polymer会有一个优雅的解决方案，用于对齐内部的元素，而不让它们彼此重叠。在我看来，如果需要选项卡，它们通常会使用更大的
应用程序工具栏
，因此底部位于标题和按钮下方。我试图解决按钮单击问题并相应地编辑我的答案。@AtipAsvanund我编辑了我的答案，基本上删除了
底部项
属性，并将
页边距顶部：自动
添加到
底部
css类中。很高兴提供帮助，欢迎使用堆栈溢出。如果您认为此答案解决了问题，请单击绿色复选标记将其标记为“已接受”。非常感谢。它现在起作用了。但是，不可单击。我不确定它是否相关。如果我完全删除，那么就可以再次单击。我找到了一个修复方法。我只是在底部加上左边的边距：100px。然而，这似乎是一个很大的缺陷。我希望Polymer会有一个优雅的解决方案，用于对齐内部的元素，而不让它们彼此重叠。在我看来，如果需要选项卡，它们通常会使用更大的
应用程序工具栏
，因此底部位于标题和按钮下方。我试图解决按钮单击问题并相应地编辑我的答案。@AtipAsvanund我编辑了我的答案，基本上删除了
底部项
属性，并将
页边距顶部：自动
添加到
底部
css类中。很高兴提供帮助，欢迎使用堆栈溢出。如果您认为此答案解决了问题，请单击绿色复选标记将其标记为“已接受”。
paper-tabs {
  min-width: 200px;
}

.bottom {
  margin-top: auto;
  @apply(--layout-horizontal);
}

.flex {
  @apply(--layout-flex);
}