如何在HTML和CSS中制作标尺 [英] How to make a ruler scale in HTML and CSS

问题描述

我想使用HTML和CSS绘制一些简单的东西：

I would like to draw something simple like this using HTML and CSS:

| _____ | _____ | _____ | _____ |

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

with aligned numbers underneath each vertical bar, e.g. 0, 1, 2, 3, 4 etc.

我也想以编程方式调整栏之间的空间。有没有任何例子可以跟着？

I would also like to adjust the space between bars programmatically. Is there any example I can follow?

推荐答案

我尝试从不使用表格非表格数据，使用表格：

I try never to preach using tables for non-tabular data, but you could just do it using a table:

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

这篇关于如何在HTML和CSS中制作标尺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！