javascript - 任何人都知道如何在 CSS 中制作它以便响应？

Question

我想知道如何在 CSS 中实现这一点(less 和 jquery 也很好:)

我有 slider ，但它看起来像这样:

我希望它看起来像这样:

字体是诅咒没问题，没有使东西变圆等等，删除边框和东西......

我想知道如何实现这个小引脚:在 CSS 中，因此它保持正确的尺寸，并在屏幕尺寸不同时挤在一起。顺便说一下，非常感谢 danielcrisp，for this awesome slider for AngularJS.

感谢任何帮助。

Answer 1

想到了这个解决方案 http://codepen.io/anon/pen/bkdAs

HTML:

<div class="slider">
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
</div>

CSS:

.slider{
  width:500px;
  height:20px;
  border-bottom:2px solid red;
}
.slider .pin{
  height:100%;
  width:10%;
  float:left;
  border-right:2px solid red;
  transform: translateY(55%);
  box-sizing: border-box; 
}
.slider .pin:last-child{
  display:none;
}

虽然将 div 附加到 slider 内，但使用一些 javascript 可能更容易实现