样式化 Google Polymer 的纸质滑块元素

Question

我有一个包含许多纸滑块元素的表单。我想减少它们之间的垂直空间，但是在调整样式以使其正常工作时遇到了麻烦。这是一个例子。我希望这些控件的扩展范围不超过其实际可见元素，以便我可以更好地控制它们的位置。

<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link href="http://www.polymer-project.org/components/paper-slider/paper-slider.html" rel="import">

<polymer-element name="my-element" noscript>
  <template>
    <style>
      :host { font-family: "Helvetica Neue", sans-serif; }
      :host .label { min-width: 150px; }
    </style>
    <div layout horizontal>
      <div class="label" self-center>RED</div>
      <paper-slider id="honest" pin="true" snaps="true" min="1" max="5" step="1" immediateValue="test"></paper-slider>
    </div>
    <div layout horizontal>
      <div class="label" self-center>GREEN</div>
      <paper-slider id="respectful" pin="true" snaps="true" min="1" max="5" step="1" value="1"></paper-slider>
    </div>
    <div layout horizontal>
      <div class="label" self-center>BLUE</div>
      <paper-slider id="knowledgeable" pin="true" snaps="true" min="1" max="5" step="1" value="1"></paper-slider>
    </div>
    <div layout horizontal>
      <div class="label" self-center>ORANGE</div>
      <paper-slider id="fair" pin="true" snaps="true" min="1" max="5" step="1" value="1"></paper-slider>
    </div>
    <div layout horizontal>
      <div class="label" self-center>PURPLE</div>
      <paper-slider id="likeable" pin="true" snaps="true" min="1" max="5" step="1" value="1"></paper-slider>
    </div>
  </template>
</polymer-element>
<my-element></my-element>

Answer 1

:host paper-slider { margin-top: -1px; margin-bottom:-1px; }

问题在于滑块尽可能地彼此靠近。您可以输入负数，但请记住，事情会开始看起来很糟糕。