如何将聚合物纸张标签对齐到右侧

Question

我正在尝试建立我的新个人网站，并且为了避免在我计划中使用巨大的JS，我试图将形成网站导航的纸质标签对齐到右侧屏幕，但仍然有一个边缘。我不能真正使用CSS边距，因为标签只能在我的屏幕上看起来。该网站位于http://adueppen.github.io/。

Answer 1

如果在工具栏中放置了带有flex属性的元素，它将填充插入它的空间。您可以使用它来右对齐标签，如下所示：

<core-toolbar class="tall animate">
  <span class="bottom" flex></span>
  <paper-tabs id="tabs" selected="0" class="bottom indent" style="width: 300px">
    <paper-tab name="home"><p>Home</p></paper-tab>
    <paper-tab name="projects" ><p>Projects</p></paper-tab>
    <paper-tab name="blog"><p>Blog</p></paper-tab>
    <paper-tab name="about"><p>About</p></paper-tab>
  </paper-tabs>
</core-toolbar>

Answer 2

尝试在<div horizontal end-justified layout style="width:100%">中包装纸张标签。

使用layout attributes查看此参考资料。

Answer 3

在Polymer 1.6中，paper-toolbar被分割为class="title"元素。

＆＃34;标题＆＃34; element将是左侧的最后一项，后面的元素将是右对齐的。

来自Polymer paper-toolbar演示：

<paper-toolbar>
  <paper-icon-button icon="menu"></paper-icon-button>
  <span class="title">Title</span>
  <paper-icon-button icon="refresh"></paper-icon-button>
  <paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>

如果您不想要标题，只需使用空白div：

<div class="title"></div>