Polymer 1.0：如何去除 <paper-dialog> 中 <paper-button> 周围的白色 space？

Question

问题

How do I remove all the white space around the <paper-button> elements (only) inside a <paper-dialog> element?

因此，例如，悬停效果应该一直延伸到边缘。但我还是想保留段落文本周围的白色space。

演示：

Click this JS Bin 工作示例代码。
Safari 用户特别注意：使用 Chrome 观看演示。

尝试次数：

在代码和演示中，我评论了我之前的所有尝试/* No effect */。

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Polymer Bin</title>

    <base href="http://element-party.xyz">
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="all-elements.html">

</head>

<body>
<x-element></x-element>


    <dom-module id="x-element">
    <style>
        :host {           /* No effect */
            display: block; /* No effect */
        margin: 0;
        }
        paper-dialog {
            width: 400px;
            margin: 0;   /* No effect */
            padding: 0;  /* No effect */
        }
        paper-button {
            width: 100%; /* No effect */
            margin: 0;   /* No effect */
        }
        paper-dialog::shadow { /* No effect */
            margin: 0 auto;      /* No effect */
            padding: 0 auto;     /* No effect */
        }
        paper-button:hover{
            background-color: black;
            color: white;        
        }
    </style>
        <template>
            <paper-dialog id="dialog">
                <p>
                    I want to remove the white space around the below buttons
                    so the hover effect extends to the edges of this dialog.
                    But I want to keep the white space around this text.
                </p>
                <div class="layout vertical">
                        <paper-button>One</paper-button>
                        <paper-button>Two</paper-button>
                        <paper-button>Three</paper-button>
                </div>
            </paper-dialog>
            <paper-button on-tap="openDialog">Open Dialog</paper-button>
        </template>
        <script>
            Polymer({
                is: 'x-element',
                openDialog: function(){
                    this.$.dialog.open();
                }
            });
        </script>
    </dom-module>


</body>
</html>

Answer 1

我认为你只需要在你的选择器上更具体一点试试：

paper-dialog div { 
  margin: 0;      
  padding: 0;     
}

但这会为所有 div 元素设置样式，所以我不确定这是否是您想要的。

Polymer 1.0：如何去除 <paper-dialog> 中 <paper-button> 周围的白色 space？

Polymer 1.0: How do I remove white space around <paper-button> in <paper-dialog>?

templates

dialog

jsbin

polymer

polymer-1.0

问题