时间戳

首页 > 解决方案 > 使用 HTML 和 CSS 实现标尺

html - 使用 HTML 和 CSS 实现标尺

问题描述

我想在 CSS 中实现一个如下所示的标尺：

在此处输入图像描述

我可以在这里找到类似的东西：http: //jsfiddle.net/thirdender/kwcug/但我不知道如何将其编辑为我需要的方式（数字出现在行上方并具有类似的行在图片里）。这是处理它的 css 的一部分：

.ruler li {
    padding-left: 1cm;
    width: 2em;
    margin: .64em -1em -.64em;
    text-align: center;
    position: relative;
    text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
    content: '';
    position: absolute;
    border-left: 1px solid #ccc;
    height: .64em;
    top: -.64em;
    right: 1em;
}

你能给我一些提示吗？

标签： htmlcss

解决方案

这个有帮助吗？

.ruler {
  position: relative;
  width: 70%;
  margin: 20px auto;
  height: 14px;
}

.ruler .cm,
.ruler .mm {
  position: absolute;
  border-left: 1px solid #555;
  height: 14px;
  width: 10%;
}

.ruler .cm:after {
  position: absolute;
  bottom: 15px;
  font: 11px/1 sans-serif;
}

.ruler .mm {
  height: 5px;
}

.ruler .mm:nth-of-type(5) {
  height: 10px;
}

.ruler .cm:nth-of-type(1) {
  left: 0%;
}

.ruler .cm:nth-of-type(1):after {
  content: "0";
}

.ruler .cm:nth-of-type(2) {
  left: 10%;
}

.ruler .cm:nth-of-type(2):after {
  content: "1";
}

.ruler .cm:nth-of-type(3) {
  left: 20%;
}

.ruler .cm:nth-of-type(3):after {
  content: "2";
}

.ruler .cm:nth-of-type(4) {
  left: 30%;
}

.ruler .cm:nth-of-type(4):after {
  content: "3";
}

.ruler .cm:nth-of-type(5) {
  left: 40%;
}

.ruler .cm:nth-of-type(5):after {
  content: "4";
}

.ruler .cm:nth-of-type(6) {
  left: 50%;
}

.ruler .cm:nth-of-type(6):after {
  content: "5";
}

.ruler .cm:nth-of-type(7) {
  left: 60%;
}

.ruler .cm:nth-of-type(7):after {
  content: "6";
}

.ruler .cm:nth-of-type(8) {
  left: 70%;
}

.ruler .cm:nth-of-type(8):after {
  content: "7";
}

.ruler .cm:nth-of-type(9) {
  left: 80%;
}

.ruler .cm:nth-of-type(9):after {
  content: "8";
}

.ruler .cm:nth-of-type(10) {
  left: 90%;
}

.ruler .cm:nth-of-type(10):after {
  content: "9";
}

.ruler .cm:nth-of-type(11) {
  left: 100%;
}

.ruler .cm:nth-of-type(11):after {
  content: "10";
}

.ruler .mm:nth-of-type(1) {
  left: 10%;
}

.ruler .mm:nth-of-type(2) {
  left: 20%;
}

.ruler .mm:nth-of-type(3) {
  left: 30%;
}

.ruler .mm:nth-of-type(4) {
  left: 40%;
}

.ruler .mm:nth-of-type(5) {
  left: 50%;
}

.ruler .mm:nth-of-type(6) {
  left: 60%;
}

.ruler .mm:nth-of-type(7) {
  left: 70%;
}

.ruler .mm:nth-of-type(8) {
  left: 80%;
}

.ruler .mm:nth-of-type(9) {
  left: 90%;
}

.ruler .mm:nth-of-type(10) {
  left: 100%;
}
<div class='ruler'>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
    <div class='mm'></div>
  </div>
  <div class='cm'></div>
</div>

推荐阅读