¿Cómo hacer un platillo chino en HTML y CSS

Question

me gustaría llamar algo tan sencillo como esto usando HTML y CSS:

|_____|_____|_____|_____|

con los números alineados debajo de cada barra vertical, por ejemplo, 0, 1, 2, 3, 4 etc.

También me gustaría ajustar el espacio entre barras programáticamente. ¿Hay algún ejemplo que pueda seguir?

Answer 1

Trato siempre de no predicar el uso de tablas para los datos no tabulares, pero sólo podía hacerlo usando una tabla:

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

un violín: http://jsfiddle.net/ZH7Lx/

Answer 2

Una respuesta estática:

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

Para poder cambiarlo, el uso de JavaScript.

Answer 3

Éstos son algunos CSS on-screen rulers en un violín: -p Probablemente haya formas mejores/más elegantes de establecer el espaciado, pero incluí un ejemplo simple que recorre y ajusta los valores sobresalientes.

Answer 4

mira esto: 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> 

parece más elegante y se puede personalizar fácilmente.

Answer 5

Aquí es un buen ejemplo:

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

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

o otro ejemplo

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