下面是一些CSS on-screen rulers：-p可能有更好/更花哨的方法来设置间距，但我提供了一个简单的示例，循环并调整突出值。

我尽量不鼓吹对非表格数据使用表，但您可以直接使用表来做到这一点：

<table width=100% style='font-family: monospace;'>
    <tr style='border-bottom: 1px solid #000;'>
        <td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td width=1%>
            |
        </td>
    </tr>
    <tr>
        <td>
            0
        </td><td>
            1
        </td><td>
            2
        </td><td>
            3
        </td><td>
            4
        </td>
    </tr>
</table>

小提琴：http://jsfiddle.net/ZH7Lx/

下面是一个很好的例子：

<label>0</label>
<label>100</label>
<label>200</label>
       ...

https://codepen.io/cfenzo/pen/jEGQGm
或者另一个例子
https://codepen.io/pbweb/pen/grQKEK

这是我在我的统治者使用的解决方案。HTML和CSS只！
注：

• 这是一个局部的，因为我不需要添加数字，只是刻度标记。也许我会改进它以后&添加数字。你可以自由地建立它从这里;
• 它可以缩放，这对我来说非常有用，因为我在时间刻度上使用它作为小时标记之间的分钟标记。这里，我只包括4个标记，但可以有很多。不要忘记你需要比元素少1个标记（例如，10毫米9个标记）
• 它包括标尺中心线。
• 没有标记的Javascript和html元素（如果你有一个无限的标尺，当你拖动或放大它时会自动生成，这很有用）

溶液：创建标尺单元格div，为标记添加背景图像（可以使用线性渐变），add为每个标记设置一个百分比位置。这在css中只能做一次，如果你使用相同的图像，对那个文件只有一个请求，加上如果你使用线性渐变，这意味着根本没有额外的请求。因为你设置了一个百分比位置，然后你可以随意拉伸尺子，它仍然会看起来很漂亮。
如果在某些情况下（例如在移动终端屏幕上，或者当你拉伸你的标尺来放大）你可能想要在标尺点之间动态地创建更多的标记。在这种情况下，简单地使用javascript给你的标尺单元格分配一个像.big这样的新类，并为那个类设置一组不同的标记背景。它们会很好地切换。
而且，由于我们使用了非伪元素--真实的的div、真实的背景--这种模块化的ruler方法允许你用javascript动态地改变它。
代码：

.comment{color:darkgreen}
.container{
  resize:horizontal;
  overflow:auto;
  width:60%;
  min-width:100px;
  margin:0px auto;
  border:1px solid black;
  padding:20px;
}
.ruler{
  margin:20px 0px;
  background-color:rgb(255, 255, 223);
  height:20px;
  width:100%;
  display:flex;
  justify-content:center
}
.ruler-cell{
  position:relative;
  height:100%;
  width:calc(100% - 20px);
  border-left:1px solid black;
  border-right:1px solid black;
  background-repeat:no-repeat;
  background-size:
    100% 1px,
    1px 8px,
    1px 8px,
    1px 8px,
    1px 8px;
  background-position:
    0% center,
    20% center,
    40% center,
    60% center,
    80% center;
  background-image:
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray);
}
.ruler-cell span{
  position:absolute;
  top:-15px;
  font-size:12px;
  text-align:center;
}
.zero{
  left:0;
  transform:translateX(-50%);
  display:none;
}
.number{
  right:0px;
  transform:translateX(50%);
}
.ruler-cell:first-child .zero{
  display:block;
}

<div class="container">
  <p class="comment">#this container is resizeable! Try to resize it!</p>
  <div class="ruler">
    <div class="ruler-cell">
      <span class="zero">0</span>
      <span class="number">1</span>
    </div>
  </div>
</div>

小提琴：https://jsfiddle.net/w423gLuf/

静态回答：

<pre>
|____|____|____|____|
0    1    2    3    4
</pre>

要更改它，请使用JavaScript。

看看这个：http://jsfiddle.net/thirdender/kwcug/

<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

<div>
    <ul class="ruler" data-items="10"></ul>
</div>

看起来更花哨，可以很容易地定制。

两个标尺（垂直和水平）与块相邻（用于测量）：https://codepen.io/Raph285/pen/oNPdPWq

这只使用HTML和CSS。
以下是概述：
超文本标记语言

<div class='ruler_top'>
<div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <!-- etc... -->

中央支助系统

.ruler_top .cm:nth-of-type(1) {
    left: 0%;
}
.ruler_top .cm:nth-of-type(1):after {
    content: "0";
}
.ruler_top .cm:nth-of-type(2) {
    left: 10%;
}
.ruler_top .cm:nth-of-type(2):after {
    content: "1";
}
/* etc... */

HTML代码是相当重复的，但你可以很容易地缩短它与PHP和for循环。
灵感源自Artur Arsalanov尺子（https://codepen.io/pbweb/pen/gMQKEK）