造型Google聚合物的紙張滑塊元素

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

的問題是，滑塊是作爲相互接近，因爲他們可以。你可以輸入負數，但請記住，事情將開始看起來萎縮。