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; }

问题是滑块尽可能彼此靠近。你可以输入负数，但请记住事情会开始变得模糊。

设置Google Polymer的纸张滑块元素

1 个答案: