Как сделать масштабирование линейки в HTML и CSS

Я хотел бы нарисовать что-то простое, как это, используя HTML и CSS:

|_____|_____|_____|_____|

с выровненными числами под каждой вертикальной чертой, например 0, 1, 2, 3, 4 и т.п.

Я также хотел бы настроить пространство между барами программно. Есть ли какой-нибудь пример, которому я могу следовать?

Источник

7 ответов

Решение

Я стараюсь никогда не проповедовать, используя таблицы для не табличных данных, но вы можете просто сделать это, используя таблицу:

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

Источник

Вот некоторые экранные линейки CSS в скрипке:-p Вероятно, есть более эффективные / изощренные способы установки интервала, но я включил простой пример, который просматривает и корректирует основные значения.

Источник

Вот хороший пример:

<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 отметку МЕНЬШЕ, чем элементов (например, 9 отметок для 10 мм)
  • Он включает центральную линию линейки.
  • НЕТ Javascript и НЕТ элементов html для маркеров (полезно, если у вас есть бесконечная линейка, которая автоматически генерируется при перетаскивании или увеличении)

РЕШЕНИЕ: Создайте div ячейки линейки, добавьте фоновые изображения для маркеров (можно использовать linear-gradient), добавьте процентное положение для каждого маркера. Это можно сделать только один раз в вашем CSS, и если вы используете одно и то же изображение, будет только один запрос для этого файла, плюс, если вы используете linear-gradient, это означает, что никаких дополнительных запросов не будет. Поскольку вы устанавливаете процентное положение, вы можете растягивать линейку по своему усмотрению, она все равно будет выглядеть красиво.

В определенных случаях (например, на экране мобильного устройства или когда вы растягиваете линейку для увеличения) вы можете динамически создавать дополнительные отметки между точками линейки. В этом случае просто используйте 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/

Источник

Статический ответ:

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

Источник
Другие вопросы по тегам