表佈局 - 引導進度條

enter image description here

基本上我所做的是讓一個div

display: table;

，然後用div的填充它包含字體真棒圖標與

display: table-cell;

JS小提琴：http://jsfiddle.net/abehnaz/wCHbc/1/

我現在的問題是，我不知道如何讓行從一個表格單元格的中心到另一個表格單元格的中心。任何人都可以將我指向正確的方向嗎？

編輯：

這裏是我得到了我一直在尋找：http://jsfiddle.net/abehnaz/wCHbc/8/。這是一個相當羅嗦的解決方案，但它可以完成這項工作。唯一留給我的是試圖弄清楚如何在頂線和底線之間找到差距。有什麼想法嗎？

來源

2013-08-26 Diode Dan

入住此解決方案：http://jsfiddle.net/wCHbc/5/

基本上我創建了一個新的div是該行並恢復了結構簡單的DIV佈局：

.line{ 
    width:100%; 
    position:relative; 
    top:25px; 
    left:0px; 
    height:10px; 
    background:#00f; 
    z-index:-1; 
}

如果你不想用符號透明背景，只需添加一個背景色：

.icon-star, .icon-rss{ 
    background:#fff; 
}

來源

2013-08-26 14:38:42 gespinha

這看起來是在正確的道路上。問題是，爲什麼它會將第二個圖標從「滑塊」框中移出？是否有可能以某種方式將它放在背景中？我希望它在滑塊重新調整時自動調整大小。 –

用新的解決方案更新了上面的文章，可以根據需要使用。只是不要使用display：table;當你總是可以使用表格標籤時，但是在這種情況下，如果你使用div結構佈局，效果會更好;） – gespinha

你可以做到這一點與position: absolute

DEMO jsFiddle

.line { 
    position: fixed; 
    width:200px; 
    height:7px; 
    top:95px; 
    left: 0; 
    right:60px; 
    margin: 0 auto; 
    background: blue; 
    z-index:-1; 
}

EDITED

我會用一個進度條本

DEMO jsFiddle

來源

2013-08-26 14:42:17 Vector

這也看起來像是在正確的軌道上。我在這裏看到的主要問題是酒吧是一個固定的長度。「滑塊」元素是動態的，可以改變寬度。是否有可能讓這條線做同樣的事情？ –

你可以使它變寬。我會親自使用進度條，看看我編輯的* jsfiddle * – Vector

進度條的想法很有趣。雖然不是我想要的。看到我的jsFiddle獲得了我的解決方案。 –

表佈局 - 引導進度條

回答

相關問題