表格布局 - 引导进度条

Question

我正在尝试获得以下效果：

基本上我所做的就是用

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做到这一点

演示jsFiddle

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

已编辑

我会为此使用进度条

演示jsFiddle