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

我想用HTML和CSS画一些简单的东西：

|_____|_____|_____|_____|

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

我还想以编程方式调整条形图之间的间距。有什么我可以效仿的例子吗？

下面是一些CSS屏幕上的标尺：-p可能有更好/更花哨的方法来设置间距，但我包含了一个简单的例子，它循环并调整显著值。

我从不提倡使用表来处理非表格数据，但您可以使用表：

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

这里有一个很好的例子：

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

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

或另一示例

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

这是我在尺子中使用的解决方案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>

Js文件：https://jsfiddle.net/w423gLuf/

静态答案：

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

要更改它，请使用JavaScript。

看看这个：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>

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

两个标尺（垂直和水平）与块相邻（用于测量）：https://codepen.io/Raph285/pen/oNPdPWq

这使用HTML&仅CSS。

以下是一个概述：

HTML

<div class='ruler_top'>
<div class='cm'>
    <div class='mm'></div>
    <div class='mm'></div>
    <!-- etc... -->

CSS

.ruler_top .cm:nth-of-type(1) {
    left: 0%;
}
.ruler_top .cm:nth-of-type(1):after {
    content: "0";
}
.ruler_top .cm:nth-of-type(2) {
    left: 10%;
}
.ruler_top .cm:nth-of-type(2):after {
    content: "1";
}
/* etc... */

HTML代码非常重复，但您可以使用PHP和for循环轻松地缩短它。

灵感来自阿尔萨拉诺夫统治者(https://codepen.io/pbweb/pen/gMQKEK)

相关内容

最新更新

热门标签：