8

HTMLとCSSを使用して、次のような単純なものを描画したいと思います。

|_____|_____|_____|_____|

各垂直バーの下に数字を並べて表示します0, 1, 2, 3, 4。

また、プログラムでバー間のスペースを調整したいと思います。私が従うことができる例はありますか？

4

6 に答える 6

19

これがフィドルのCSS画面上の定規です:-p間隔を設定するためのより良い/より派手な方法がおそらくありますが、ループして顕著な値を調整する簡単な例を含めました。

于 2012-08-25T02:12:10.893 に答える
11

表形式以外のデータのテーブルを使用して説教することは決してありませんが、テーブルを使用して説教することはできます。

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

于 2012-08-25T00:42:48.143 に答える
7

これが良い例です：

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

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

または別の例

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

于 2016-08-09T06:26:38.320 に答える
2

これが私の定規で使用した解決策です。HTMLとCSSのみ！

ノート：

  • 数字を追加する必要がなかったので、スケールマーカーだけで、部分的なものです。後で改善して数字を追加するかもしれません。ここから自由に作成できます。
  • ズームで動作します。これは、時間マーク間の分マーカーとして時間スケールで使用するため、非常に便利でした。ここでは、4つのマークしか含めていませんが、多くのマークが含まれている可能性があります。要素があるよりも1マーク少ない必要があることを忘れないでください（たとえば、10mmの場合は9マーク）
  • 定規の中心線が含まれています。
  • マーカー用のJavascriptおよびhtml要素はありません（ドラッグまたは拡大したときに自動生成されるエンドレスルーラーがある場合に便利です）

解決策：ルーラーセルdivを作成し、マーカーの背景画像を追加し（線形グラデーションを使用できます）、すべてのマーカーのパーセント位置を追加します。これはcssで1回だけ実行できます。同じ画像を使用する場合、そのファイルに対するリクエストは1つだけです。さらに、線形グラデーションを使用する場合は、余分なリクエストはまったくありません。パーセント位置を設定しているので、定規を好きなように伸ばすことができますが、それでも見栄えがします。

特定の場合（たとえば、モバイルデバイスの画面上、またはルーラーを伸ばして拡大する場合）、ルーラーポイント間に動的にマークを追加することができます。この場合、javascriptを使用して、.bigなどの新しいクラスをルーラーセルに割り当て、そのクラスに別のマークの背景のセットを設定します。それらはうまく切り替わります。

また、非疑似要素（実際のdiv、実際の背景）を使用するため、この定規へのモジュラーアプローチでは、JavaScriptを使用して動的に変更できます。

コード：

.comment{color:darkgreen}
.container{
  resize:horizontal;
  overflow:auto;
  width:60%;
  min-width:100px;
  margin:0px auto;
  border:1px solid black;
  padding:20px;
}
.ruler{
  margin:20px 0px;
  background-color:rgb(255, 255, 223);
  height:20px;
  width:100%;
  display:flex;
  justify-content:center
}
.ruler-cell{
  position:relative;
  height:100%;
  width:calc(100% - 20px);
  border-left:1px solid black;
  border-right:1px solid black;
  background-repeat:no-repeat;
  background-size:
    100% 1px,
    1px 8px,
    1px 8px,
    1px 8px,
    1px 8px;
  background-position:
    0% center,
    20% center,
    40% center,
    60% center,
    80% center;
  background-image:
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray),
    linear-gradient(gray, gray);
}
.ruler-cell span{
  position:absolute;
  top:-15px;
  font-size:12px;
  text-align:center;
}
.zero{
  left:0;
  transform:translateX(-50%);
  display:none;
}
.number{
  right:0px;
  transform:translateX(50%);
}
.ruler-cell:first-child .zero{
  display:block;
}
<div class="container">
  <p class="comment">#this container is resizeable! Try to resize it!</p>
  <div class="ruler">
    <div class="ruler-cell">
      <span class="zero">0</span>
      <span class="number">1</span>
    </div>
  </div>
</div>

Jsfiddle：https ://jsfiddle.net/w423gLuf/

于 2019-11-19T08:32:17.453 に答える
1

静的な答え：

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

変更できるようにするには、JavaScriptを使用します。

于 2012-08-25T00:28:01.433 に答える
1

これをチェックしてください：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>

より派手に見え、簡単にカスタマイズできます。

于 2015-06-15T11:14:54.653 に答える