如何在HTML和CSS中制作标尺比例

Question

我想使用HTML和CSS绘制这样简单的东西:

|_____|_____|_____|_____|

每个垂直条下面有对齐的数字,例如0, 1, 2, 3, 4等等

我还想以编程方式调整条形之间的空间.我可以效仿任何一个例子吗？

Answer 1

以下是一些小提琴中的CSS屏幕标尺 :-p可能有更好/更好的方法来设置间距,但我包含了一个循环并调整显着值的简单示例.

Answer 2

我尝试永远不会使用表格来表示非表格数据,但你可以使用表格来做:

<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/

Answer 3

这是一个很好的例子:

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

https://codepen.io/cfenzo/pen/jEGQGm

或者另一个例子

https://codepen.io/pbweb/pen/grQKEK