Html 在标尺中的记号顶部显示文本

代码在下面的fiddle链接中提供

代码：

$（函数（）{
//通过添加项目构建“动态”标尺
$（“.ruler[数据项]”）。每个（函数（）{
变量标尺=$（this）.empty（），
len=数字（标尺.attr（“数据项”））| | 0，
item=$（document.createElement（“li”），
我
对于（i=0；i
.ruler、.ruler li{
保证金：0；
填充：0；
列表样式：无；
显示：内联块；
}
/*IE6-7修复程序*/
.尺子，.尺子李{
*显示：内联；
}
.尺子{
背景：浅黄色；
盒影：0-1px1em hsl（60,60,84%）插图；
边界半径：2px；
边框：1px实心#ccc；
颜色：#ccc；
保证金：0；
高度：3em；
右侧填充：1cm；
空白：nowrap；
}
李先生{
左侧填充：1cm；
宽度：2米；
边缘：64em-1em-0.64em；
文本对齐：居中；
位置：相对位置；
文本阴影：1px1pHSL（60,60%，84%）；
}
李：以前{
内容：''；
位置：绝对位置；
左边框：1px实心#ccc；
高度：.64em；
顶部：-.64em；
右：1em；
}
/*让我变漂亮*/
身体{
字体：12px Ubuntu，Arial，无衬线；
利润率：20px；
}
div{
边缘顶部：2米；
}

1
2
3
4


间距
1厘米
2厘米
1in
1em
20px
只需将列表项稍微向右和向上移动即可。然后将
：前面的
伪元素向左和向下移动相同的量


我不知道为什么我的更新会让JSFIDLE认为这一版本现在有1006个修订。
只需将列表项稍微向右和向上移动即可。然后将
：前面的
伪元素向左和向下移动相同的量


我不知道为什么我的更新会让JSFIDLE认为这一版本现在有1006个修订版。
在
标尺li
中添加一些左
位置，并在
li:before
中调整右
位置


$（函数（）{
//通过添加项目构建“动态”标尺
$（“.ruler[数据项]”）。每个（函数（）{
变量标尺=$（this）.empty（），
len=数字（标尺.attr（“数据项”））| | 0，
item=$（document.createElement（“li”），
我
对于（i=0；i
.ruler，
李先生{
保证金：0；
填充：0；
列表样式：无；
显示：内联块；
}
/*IE6-7修复程序*/
尺子
李先生{
*显示：内联；
}
.尺子{
背景：浅黄色；
盒影：0-1px1em hsl（60,60,84%）插图；
边界半径：2px；
边框：1px实心#ccc；
颜色：#ccc；
保证金：0；
高度：3em；
右侧填充：1cm；
空白：nowrap；
}
李先生{
左侧填充：1cm；
宽度：2米；
边缘：64em-1em-0.64em；
文本对齐：居中；
位置：相对位置；
文本阴影：1px1pHSL（60,60%，84%）；
顶部：-.64em；
左：.64em
}
李：以前{
内容：''；
位置：绝对位置；
左边框：1px实心#ccc；
高度：.64em；
右：1.4em；
}
/*让我变漂亮*/
身体{
字体：12px Ubuntu，Arial，无衬线；
利润率：20px；
}
div{
边缘顶部：2米；
}


一,
二,
三,
四,


间距
1厘米
2厘米
1in
1em
20px
在您的
标尺上添加一些左
位置
，并在
li:before


$（函数（）{
//通过添加项目构建“动态”标尺
$（“.ruler[数据项]”）。每个（函数（）{
变量标尺=$（this）.empty（），
len=数字（标尺.attr（“数据项”））| | 0，
item=$（document.createElement（“li”），
我
对于（i=0；i
.ruler，
李先生{
保证金：0；
填充：0；
列表样式：无；
显示：内联块；
}
/*IE6-7修复程序*/
尺子
李先生{
*显示：内联；
}
.尺子{
背景：浅黄色；
盒影：0-1px1em hsl（60,60,84%）插图；
边界半径：2px；
边框：1px实心#ccc；
颜色：#ccc；
保证金：0；
高度：3em；
右侧填充：1cm；
空白：nowrap；
}
李先生{
左侧填充：1cm；
宽度：2米；
边缘：64em-1em-0.64em；
文本对齐：居中；
位置：相对位置；
文本阴影：1px1pHSL（60,60%，84%）；
顶部：-.64em；
左：.64em
}
李：以前{
内容：''；
位置：绝对位置；
左边框：1px实心#ccc；
高度：.64em；
右：1.4em；
}
/*让我变漂亮*/
身体{
字体：12px Ubuntu，Arial，无衬线；
利润率：20px；
}
div{
边缘顶部：2米；
}


一,
二,
三,
四,


间距
1厘米
2厘米
1in
1em
20px
这有帮助吗


陈怡
.ruler li {
    margin: .64em -1em -.64em;
}
.ruler li:before {
    content: '';
    position: absolute;
    border-left: 1px solid #ccc;
    height: .64em;
    top: -.64em;
    right: 1em;
}

.ruler li:before {
    content: '';
    border-left: 1px solid #ccc;
    margin-right: .2em;
}
.ruler li {
    margin: 0 -1em -.64em;
}