Question

我有以下Google Polymer结构

<paper-drawer-panel>
   <div drawer> 

     <paper-header-panel>
       <paper-toolbar>Drawer Header</paper-toolbar>
       <div>
           <paper-icon-item>
              <iron-icon icon="favorite" item-icon></iron-icon>
              Add List
           </paper-icon-item>
       </div>
       </paper-header-panel>

   </div>
   <div main> Main panel... </div>
 </paper-drawer-panel>

我的结果如下：

图标和文字居中对齐。如何将它们左对齐，如下图所示：

如何将纸张图标和文字对齐？

Answer 1

试试这个。

确保导入iron-flex-layout/classes/iron-flex-layout.html

更新您的代码，如下所示

<paper-drawer-panel>
 <div drawer> 

  <paper-header-panel>
   <paper-toolbar>Drawer Header</paper-toolbar>
   <div class="horizonatal layout">
       <paper-icon-item>
          <iron-icon icon="favorite" item-icon></iron-icon>
          Add List
       </paper-icon-item>
       <div class="flex"></div>
   </div>
  </paper-header-panel>
 </div>
 <div main> Main panel... </div>
</paper-drawer-panel>

Answer 2

请参阅演示，它在没有任何样式的情况下保持对齐状态，您必须确保在使用前导入纸质元素（此处需要paper-drawer-panel，paper-header-panel等）它，我认为其他一些风格导致了这个问题。

<head>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="http://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">

<!-- import the paper-elements which are used, Here importing all of them at once -->
<link rel="import" href="paper-elements/paper-elements.html">
</head>
<body>
<paper-drawer-panel>
  
<div  drawer>
     <paper-header-panel>
       <paper-toolbar>Drawer Header</paper-toolbar>
       <div>
           <paper-icon-item>
              <iron-icon icon="favorite" item-icon></iron-icon>
              Add List
           </paper-icon-item>
       </div>
       <div>
           <paper-icon-item>
              <iron-icon icon="favorite" item-icon></iron-icon>
              Clear All
           </paper-icon-item>
       </div>
       </paper-header-panel>
</div>
   
   <div main style="background:lightgray;"> Main panel... </div>
 </paper-drawer-panel>
 </body>

Answer 3

我有点迟了，但我遇到了同样的问题，我发现减少图标区域的宽度，纸张图标项目的内容正确对齐：

paper-icon-item { --paper-item-icon-width: 10px; }

希望它对某人有用。

对齐纸张图标和文字？

3 个答案: