Question

我已经使用了horizontal-align：“right”，但它不起作用......

<paper-toolbar>
  <paper-icon-button src="AC.png" paper-drawer-toggle></paper-icon-button>
  <paper-menu-button id="sortbt" >
    <paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
    <paper-menu class="dropdown-content">
      <paper-item>Not pay yet</paper-item>
      <paper-item>paid</paper-item>
      <paper-item>by boss num</paper-item>
    </paper-menu>
  </paper-menu-button>
  <paper-icon-button icon="icons:home" id="homebt" horizontal-align="right"></paper-icon-button>
</paper-toolbar>

我应该怎么做聚合物1.x

Answer 1

IMO最简单的方法就是采用弯曲的跨度来占据中间空间。

＆＃13;

<!doctype html>
<head>
  <meta name="description" content="Polymer Example">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-menu-button/paper-menu-button.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <paper-toolbar>
    <paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
    <paper-menu-button id="sortbt" >
      <paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Not pay yet</paper-item>
        <paper-item>paid</paper-item>
        <paper-item>by boss num</paper-item>
      </paper-menu>
    </paper-menu-button>
    <span style="flex: 1;"></span>
    <paper-icon-button icon="icons:home" id="homebt"></paper-icon-button>
  </paper-toolbar>
</body>

＆＃13;

Answer 2

不需要span元素。 style="margin-left: auto"就足够了。

<!doctype html>
<head>
  <meta name="description" content="Polymer Example">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-menu-button/paper-menu-button.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <paper-toolbar>
    <paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
    <paper-menu-button id="sortbt" >
      <paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Not pay yet</paper-item>
        <paper-item>paid</paper-item>
        <paper-item>by boss num</paper-item>
      </paper-menu>
    </paper-menu-button>
    <paper-icon-button icon="icons:home" id="homebt" style="margin-left: auto"></paper-icon-button>
  </paper-toolbar>
</body>

这是另一个example of complete layout with flexbox。看看粘性页脚。

我想在工具栏右侧放置纸质图标按钮，我该怎么办？

2 个答案: