任何人都有一個想法如何在CSS中做到這一點，所以它是響應？

-1

我想知道如何在CSS實現這一點（少和jQuery也不錯:)任何人都有一個想法如何在CSS中做到這一點，所以它是響應？

我有滑塊，但它看起來是這樣的：

enter image description here

我希望它是這樣的：

a slider

的字體是罵人的沒問題，不使東西輪等，消除邊境和東西...

我想知道如何在CSS中實現這個小腳位： enter image description here ，所以它保持正確的尺寸，並在屏幕尺寸不同時擠在一起。順便說一句，感謝一堆danielcrisp，for this awesome slider for AngularJS.

任何幫助表示讚賞。

來源

2014-11-04 petur

我認爲最好的解決方案是將8個元素放在絕對位置並保留10 * n％。可能使用CSS僞元素而不是DOM元素來防止您的HTML膨脹。

編輯：事實證明，你不能鏈接CSS的僞元素，你將不得不追加真正的DOM元素到你的代碼。

http://jsfiddle.net/0hea6ody/

<span class="grad grad1"></span> 
... 
<span class="grad grad9"></span>

來源

2014-11-04 09:32:12

想出了這個解決方案 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; 
}

可能更容易實現使用一些JavaScript，但爲了在滑塊內添加divs

來源

2014-11-04 09:39:35

任何人都有一個想法如何在CSS中做到這一點，所以它是響應？

回答

相關問題