表布局 - 引导进度条

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获得了我的解决方案。 –

表布局 - 引导进度条

回答

相关问题