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 个标记（例如 10 毫米为 9 个标记）
  • 它包括一个标尺中心线。
  • 没有用于标记的 Javascript 和 html 元素（如果您有一个在拖动或放大时自动生成的无限标尺，则很有用）

解决方案：创建一个标尺单元格，为标记添加背景图像（可以使用线性渐变），为每个标记添加设置百分比位置。这只能在您的 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/

于 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 回答