Geek asks and answers

How to make a ruler scale in HTML and CSS

I would like to do something simple using HTML and CSS:

|_____|_____|_____|_____|

with aligned numbers under each vertical bar, for example. 0, 1, 2, 3, 4etc.

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

+5
source share
5 answers

I try to never preach using tables for non-tabular data, but you can simply do this 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>

Violin: http://jsfiddle.net/ZH7Lx/

+7
source

CSS : -p. , / , , .

+15

Here is a good example:

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

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

or other example

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

+3
source

Static answer:

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

To change it, use JavaScript.

+1
source

Check this out: 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>

It looks more unusual and can be easily customized.

+1
source

More articles:


All Articles