不良样式的扩展聚合物元件（纸张滑块）

Question

我正在尝试扩展Polymer纸滑块元素，以便能够获取枚举列表并遍历滑块中的这些值，而不是仅显示数字值。 但是我很难使样式起作用。 如您所见，如果您运行此代码段，则其中包含文本的div不会正确地定位在图钉上。 我还希望文本的背景颜色与图钉相匹配（最左边的位置应该是灰色，其他位置的颜色应该是灰色）。 我也想摆脱它背后的圆形驼峰。 非常感谢您的CSS帮助！

另外，如果您对如何更有效地执行此操作有任何建议，请加入。

 <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="rate-picker" extends="paper-slider" attributes="snaps pin disabled secondaryProgress editable immediateValue"> <template> <link rel="stylesheet" href="http://www.polymer-project.org/components/paper-slider/paper-slider.css"> <style> .pin > #sliderKnob > #sliderKnobInner::after { white-space: nowrap; content: attr(value); width: auto; left: calc(15px - 100%); background: #3f51b5; border: 5px solid #3f51b5; border-radius: 5px; padding: 0 10px 0 10px; height: 12px; top: -3px; line-height: 10px; text-align: center; color: #fff; font-size: 10px; -webkit-transform: scale(0) translate(0); transform: scale(0) translate(0); } </style> <template if="{{!disabled}}"> <core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys> <core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys> </template> <div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}"> <div class="bar-container"> <paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryProgress="{{secondaryProgress}}" on-down="{{bardown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress> </div> <template if="{{snaps && !disabled}}"> <div class="slider-markers" horizontal layout> <template repeat="{{markers}}"> <div flex class="slider-marker"></div> </template> </div> </template> <div id="sliderKnob" on-down="{{expandKnob}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" center-justified center horizontal layout> <div id="sliderKnobInner" value="{{enumValue}}"></div> </div> </div> <template if="{{editable}}"> <paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input> </template> </template> <script> Polymer('rate-picker', { ready: function () { this.disabled = false; this.snaps = true; this.pin = true; this.min = 0; this.max = 5; this.value = 0; this.enumValues = ["No rating", "Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"]; this.enumValue = this.enumValues[this.value]; }, immediateValueChanged: function() { this.enumValue = this.enumValues[this.immediateValue]; this.super(); } }); </script> </polymer-element> <polymer-element name="my-element" noscript> <template> <style> :host { font-family: "Helvetica Neue", sans-serif; } :host .label { width: 150px; } </style> <div layout horizontal> <div class="label" self-center>RED</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>GREEN</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>BLUE</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>ORANGE</div> <rate-picker></rate-picker> </div> <div layout horizontal> <div class="label" self-center>PURPLE</div> <rate-picker></rate-picker> </div> </template> </polymer-element> <my-element></my-element> 

Answer 1

CSS具有以下规则，可防止div扩展（或使文本居中）。 删除它，它将按预期工作。

.pin > #sliderKnob > #sliderKnobInner::after {
  width: 32px;
}

（或）以您自己的内联样式添加“ width：auto”。 应该管用。