Wie

Question

ein Lineal Skala in HTML und CSS machen würde Ich mag etwas Einfaches wie diese mit Hilfe von HTML und CSS ziehen: unter jedem vertikalen Balken

|_____|_____|_____|_____|

mit Zahlen untereinander, zum Beispiel 0, 1, 2, 3, 4 usw.

Ich möchte auch den Abstand zwischen Balken programmgesteuert anpassen. Gibt es ein Beispiel, dem ich folgen kann?

Answer 1

Ich versuche nie für nicht-tabellarische Daten mit Hilfe von Tabellen zu predigen, aber man konnte einfach nicht mit ihm eine Tabelle:

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

Eine Geige: http://jsfiddle.net/ZH7Lx/

Answer 2

Eine statische Antwort:

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

Um in der Lage sein, es zu ändern, verwenden JavaScript.

Answer 3

Hier sind einige CSS on-screen rulers in einer Geige: -p Es gibt wahrscheinlich bessere/bessere Möglichkeiten, den Abstand einzustellen, aber ich habe ein einfaches Beispiel eingefügt, das die hervorstechenden Werte durchläuft und anpasst. diese

Answer 4

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

Sieht mehr Phantasie und leicht angepasst werden kann. Hier

Answer 5

ist ein gutes Beispiel:

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

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

oder ein anderes Beispiel

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