Question

我有以下示例：

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
    <link rel="import" href="bower_components/polymer/polymer.html"/>
    <link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
    <link rel='import' href='bower_components/paper-item/paper-item.html'>
    <link rel='import' href='bower_components/paper-menu/paper-menu.html'>
    <link rel='import' href='bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
    <link rel='import' href='bower_components/paper-input/paper-input.html'>
</head>
<body>
    <div style='width:400px'>
        <paper-input label='Input label' class='inputbox'></paper-input>
        <paper-dropdown-menu label='Drop down label'>
            <paper-menu class='dropdown-content'>
                <paper-item>A</paper-item>
                <paper-item>B</paper-item>
            </paper-menu>
        </paper-dropdown-menu>            
    </div>
</body>
</html>

这里我试图让纸张下拉菜单在宽度和填充方面表现得像纸张输入，但我很难将它与输入对齐。在纸张下拉菜单中似乎有一些左边填充，我无法接受填充100％宽度，就像输入默认情况下那样。我该怎么办？

谢谢： - ）

干杯 Franz Thomsen

Answer 1

在paper-dropdown-menu内，还有paper-menu-button哪种风格也需要更新。

  paper-dropdown-menu {
    width: 100%;
  }

  paper-dropdown-menu paper-menu-button {
    width: 100%;      
    padding: 0;
  }

查看此plunker。

Answer 2

如果你看一下github上的paper-dropdown-menu。您将看到它是使用纸张输入，纸张项目等其他元素构建的。这些是纸张下拉菜单的子元素。

要访问这些子元素的CSS，您需要使用“shadow”，因为这些子元素位于paper-downdown-menu的shadow DOM中。

paper-dropdown-menu {
  width: 300px;
}
paper-dropdown-menu::shadow paper-input{
  width: 300px;
}
paper-dropdown-menu::shadow paper-item{
   width: 300px;
}

这将更改下拉选项卡的宽度以及单击时实际打开的宽度。

在Polymer 1.0中将纸张下拉菜单与纸张输入对齐

2 个答案: