表格布局 - Bootstrap进度条

Question

我想获得以下效果：

基本上我所做的就是用

制作一个div

display: table;

然后使用包含带有

的Font Awesome图标的div填充它

display: table-cell;

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

我现在的问题是我无法弄清楚如何让这条线从一个表格单元的中心移动到另一个表格单元格的中心。有人能指出我正确的方向吗？

修改

以下是我如何得到我想要的东西：http://jsfiddle.net/abehnaz/wCHbc/8/。这是一个非常罗嗦的解决方案，但它完成了这项工作。剩下的唯一一件事就是试着找出如何在顶线和底线之间找到一个间隙。有什么想法吗？

Answer 1

检查此解决方案：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;
}

Answer 2

您可以使用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