如何將聚合物紙標簽向右對齊

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%">包裹紙標簽。

查看有關使用布局屬性的參考。

Answer 3

在Polymer 1.6中， paper-toolbar是使用class="title"元素拆分的。

“標題”元素將是左側的最后一項，其后的元素將右對齊。

從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>