对齐 paper-icon-button 以在脚手架的 top-right 处结束

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

如果您在 title div 中插入 flex 属性并删除不必要的空值 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>

Answer 4

您的标题想要 "title" css class。它会把你的菜单按钮推到右边。看看https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html

对齐 paper-icon-button 以在脚手架的 top-right 处结束

Align paper-icon-button to end in top-right of scaffold

html

css

polymer