将纸图标按钮对齐到脚手架右上方的末端

Question

有...

<core-scaffold id="core_scaffold">
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
        <core-toolbar id="core_toolbar"></core-toolbar>
        <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
            <core-item id="core_item" icon="settings" label="Item1" horizontal center layout></core-item>
            <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
        </core-menu>
    </core-header-panel>
    <div id="div" tool>Title</div> <span flex tool></span>
    <paper-icon-button icon="more-vert" id="paper_icon_button" tool></paper-icon-button>
</core-scaffold>

需要...

尝试对齐按钮并插入一个 <span tool flex></span> here。

Demo site

Answer 1

我从一些文档中找到了这个：

<div horizontal end-justified layout>
  <div>end-justified</div>
</div>

也许这可以帮助

来源：https://www.polymer-project.org/docs/polymer/layout-attrs.html

Answer 2

按钮的样式为

#paper_icon_button {
    left: 610px;
    top: 10px;
    position: absolute;
}

需要

#paper_icon_button {
    position: relative;
}

*现在意识到这些风格可能已经从设计师那里改变了......

Answer 3

你的头衔想要＆＃34;标题＆＃34; css课。它会将菜单按钮向右推。看看https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html

Answer 4

如果您在flex div中插入title属性并删除不必要的空span，则可以达到预期效果。

使用Polymer-0.5

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <!-- ... -->
  </core-header-panel>
  <div id="div" flex tool>Title</div>
  <paper-icon-button icon="more-vert" id="paper_icon_button" tool></paper-icon-button>
</core-scaffold>