0

问题

如何删除<paper-button>元素内元素周围的所有空白（仅）<paper-dialog>？

因此，例如，悬停效果应该一直到边缘。但我仍然想保留段落文本周围的空白。

演示：

  1. 单击此 JS Bin以获取工作示例代码。
  2. 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>
4

1 回答 1

1

我认为您只需要对选择器尝试更具体一点：

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

但这将为所有div元素设置样式，所以我不确定这是否是您所追求的。

于 2015-07-22T08:47:37.273 回答