1

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

在此处输入图像描述

基本上我所做的是用

display: table;

然后用包含 Font Awesome 图标的 div 填充它

display: table-cell;

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

我现在的问题是我无法弄清楚如何让线从一个表格单元格的中心到另一个表格单元格的中心。谁能指出我正确的方向?

编辑:

这是我得到我想要的东西的方式:http: //jsfiddle.net/abehnaz/wCHbc/8/。这是一个相当冗长的解决方案,但它确实有效。留给我的唯一一件事就是尝试弄清楚如何在顶线和底线之间留出空隙。有什么想法吗?

4

2 回答 2

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;
}
于 2013-08-26T14:38:42.393 回答
0

你可以用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

于 2013-08-26T14:42:17.977 回答