Question

我想使用HTML和CSS绘制这样简单的东西：

|_____|_____|_____|_____|

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

我还想以编程方式调整条形之间的空间。有没有我可以效仿的例子？

Answer 1

以下是小提琴中的一些CSS on-screen rulers :-p可能有更好/更好的方法来设置间距，但我提供了一个循环并调整显着值的简单示例。

Answer 2

我尝试永远不会使用表格来表示非表格数据，但您可以使用表格来执行此操作：

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

Answer 3

这是一个很好的例子：

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

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

或其他例子

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

Answer 4

静态答案：

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

为了能够更改它，请使用JavaScript。

Answer 5

检查一下： 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>

看起来更加花哨，可以轻松定制。

Answer 6

这是我在标尺中使用的解决方案。 仅HTML和CSS！

注意：

这只是部分内容，因为我不需要添加数字，只需添加刻度标记即可。也许以后再改善并添加数字。您可以从此处自由构建它；
它可与缩放一起使用，这对我来说非常有用，因为我在时间刻度上将其用作小时标记之间的分钟标记。在这里，我仅包含4个标记，但可以有很多。别忘了，您需要的标记要比元素少1个标记（例如10毫米9个标记）
它包括标尺中心线。
没有用于标记的Javascript和html元素（如果您具有在拖动或放大时会自动生成的无尽标尺，则很有用）

解决方案：创建一个标尺单元格div，添加标记的背景图像（可以使用线性渐变），为每个标记添加设置百分比位置。在CSS中，此操作只能执行一次，并且如果使用同一图像，则对该文件将只有一个请求，如果使用线性渐变，则意味着完全没有额外的请求。由于您设置了百分比位置，因此您可以根据需要拉伸标尺，它仍然看起来不错。

如果在某些情况下（例如在移动设备屏幕上，或者在拉伸标尺进行放大时），您可能希望在标尺点之间动态创建更多标记。在这种情况下，只需使用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/

如何在HTML和CSS中制作标尺比例

6 个答案: