Одна цифра выравнивается по второй позиции (должна быть ниже второй цифры)

У меня есть этот код

<!DOCTYPE html>
<html lang = "cs">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <style>
        @font-face {
            font-family: 'Styrene Black';
            src: url('StyreneAWeb-Black.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Bold';
            src: url('StyreneAWeb-Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Medium';
            src: url('StyreneAWeb-Medium.ttf') format('truetype');
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Styrene Bold', Arial, sans-serif;
            color: white;
        }

        .container {
            background: url('pozadi2.png') no-repeat center center;
            background-size: cover;
            padding-left: 4rem;
            padding-top: 3rem;
            width: 1296px;
            height: 768px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            text-align: left;
        }


        .heading {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-bottom: 1rem;
        }

        .time-container {
            display: flex;
            align-items: flex-end;
            margin-bottom: 0rem;
        }

        .number {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-right: 0.5rem;
            min-width: 6rem;
            text-align: left;
        }

        .unit {
            font-size: 4rem;
            font-family: 'Styrene Medium';
            margin-right: 1.5rem;
        }

        .note {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 0.5rem;
            color: #233254;
            line-height: 1.5;
        }

        .note2 {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 2rem;
            color: #233254;
            line-height: 1.5;
        }

        .text-black {
            color: #233254;
            font-family: 'Styrene Black';
        }

        .note-container {
            margin-top: auto;
        }
    </style>
    <title>Title</title>
</head>
<div class = "container" id = "timer-container">
    <div id = "month-display" class = "heading"></div>

    <div class = "time-container" id = "days-container">
        <div id = "days" class = "number">1</div>
        <div id = "days-unit" class = "unit">den</div>
    </div>
    <div class = "time-container" id = "hours-container">
        <div id = "hours" class = "number">20</div>
        <div id = "hours-unit" class = "unit">hodin</div>
    </div>
    <div class = "time-container" id = "minutes-container">
        <div id = "minutes" class = "number">12</div>
        <div id = "minutes-unit" class = "unit">minut</div>
    </div>
    <div class = "time-container" id = "seconds-container">
        <div id = "seconds" class = "number">22</div>
        <div id = "seconds-unit" class = "unit">vteřin</div>
    </div>
</div>
</html>

и мне нужно выровнять любое однозначное число так, чтобы оно было на второй позиции (например, 01, но я не хочу показывать «0», я хочу только «1», но чтобы оно было на второй позиции).

Как я могу этого добиться?

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

В вашем HTML нет тега body. Пожалуйста, добавьте его и создайте воспроизводимый фрагмент, используя <>. Возможно, вы можете использовать justify-content: right;

— Mehdi 03.07.2024 14:00
javascript html css
03.07.2024 13:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
51
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

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

<div id = "days" class = "number"><span style = "opacity: 0;">0</span>1</div>

Использование стиля непрозрачности гарантирует, что ноль будет занимать пространство, но останется невидимым. Таким образом, выравнивание сохраняется без отображения нуля.

03.07.2024 14:15

Я задокументировал изменения в CSS.

  • color: white удалено из body,html
  • align-text: left для номера класса изменен на align-text: right.

@font-face {
  font-family: 'Styrene Black';
  src: url('StyreneAWeb-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Styrene Bold';
  src: url('StyreneAWeb-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Styrene Medium';
  src: url('StyreneAWeb-Medium.ttf') format('truetype');
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Styrene Bold', Arial, sans-serif;
  /* color: white; REMOVED */
}

.container {
  background: url('pozadi2.png') no-repeat center center;
  background-size: cover;
  padding-left: 4rem;
  padding-top: 3rem;
  width: 1296px;
  height: 768px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

.heading {
  font-size: 4rem;
  font-family: 'Styrene Bold';
  margin-bottom: 1rem;
}

.time-container {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0rem;
}

.number {
  font-size: 4rem;
  font-family: 'Styrene Bold';
  margin-right: 0.5rem;
  min-width: 6rem;
  text-align: right; /* CHANGED */
}

.unit {
  font-size: 4rem;
  font-family: 'Styrene Medium';
  margin-right: 1.5rem;
}

.note {
  font-size: 2rem;
  font-family: 'Styrene Medium';
  margin-bottom: 0.5rem;
  color: #233254;
  line-height: 1.5;
}

.note2 {
  font-size: 2rem;
  font-family: 'Styrene Medium';
  margin-bottom: 2rem;
  color: #233254;
  line-height: 1.5;
}

.text-black {
  color: #233254;
  font-family: 'Styrene Black';
}

.note-container {
  margin-top: auto;
}
<div class = "container" id = "timer-container">
  <div id = "month-display" class = "heading"></div>
  <div class = "time-container" id = "days-container">
    <div id = "days" class = "number">1</div>
    <div id = "days-unit" class = "unit">den</div>
  </div>
  <div class = "time-container" id = "hours-container">
    <div id = "hours" class = "number">20</div>
    <div id = "hours-unit" class = "unit">hodin</div>
  </div>
  <div class = "time-container" id = "minutes-container">
    <div id = "minutes" class = "number">12</div>
    <div id = "minutes-unit" class = "unit">minut</div>
  </div>
  <div class = "time-container" id = "seconds-container">
    <div id = "seconds" class = "number">22</div>
    <div id = "seconds-unit" class = "unit">vteřin</div>
  </div>
</div>
03.07.2024 14:15

Простое решение:

выравнивание текста: по правому краю; поле справа: 1,5рем;

.number {
    font-size: 4rem;
    font-family: 'Styrene Bold';
    margin-right: 1.5rem;
    min-width: 6rem;
    text-align: right;
}
03.07.2024 14:23
Ответ принят как подходящий

Как уже упоминал Skyunbydev, вы можете использовать скрытый 0, чтобы соответствовать цифрам. Или, если ваши цифры будут динамическими, то можно установить дополнительный символ с помощью JavaScript. В следующем фрагменте у меня есть:

  • Добавлен оранжевый background-color, чтобы сделать текст видимым, в html,body CSS.
  • В ваш код добавлен тег body.
  • В конце тела добавлен дополнительный тег сценария, который содержит функцию для проверки однозначных цифр и добавления дополнительного символа (скрытого) для выравнивания одиночных цифр с оставшимися двузначными числами. Эта функция в настоящее время запускается при загрузке window.

<!DOCTYPE html>
<html lang = "cs">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <style>
        @font-face {
            font-family: 'Styrene Black';
            src: url('StyreneAWeb-Black.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Bold';
            src: url('StyreneAWeb-Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Styrene Medium';
            src: url('StyreneAWeb-Medium.ttf') format('truetype');
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Styrene Bold', Arial, sans-serif;
            color: white;
            background-color: orange;
        }

        .container {
            background: url('pozadi2.png') no-repeat center center;
            background-size: cover;
            padding-left: 4rem;
            padding-top: 3rem;
            width: 1296px;
            height: 768px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            text-align: left;
        }


        .heading {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-bottom: 1rem;
        }

        .time-container {
            display: flex;
            align-items: flex-end;
            margin-bottom: 0rem;
        }

        .number {
            font-size: 4rem;
            font-family: 'Styrene Bold';
            margin-right: 0.5rem;
            min-width: 6rem;
            text-align: left;
        }

        .unit {
            font-size: 4rem;
            font-family: 'Styrene Medium';
            margin-right: 1.5rem;
        }

        .note {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 0.5rem;
            color: #233254;
            line-height: 1.5;
        }

        .note2 {
            font-size: 2rem;
            font-family: 'Styrene Medium';
            margin-bottom: 2rem;
            color: #233254;
            line-height: 1.5;
        }

        .text-black {
            color: #233254;
            font-family: 'Styrene Black';
        }

        .note-container {
            margin-top: auto;
        }
    </style>
    <title>Title</title>
</head>
  <body>
    <div class = "container" id = "timer-container">
    <div id = "month-display" class = "heading"></div>

    <div class = "time-container" id = "days-container">
        <div id = "days" class = "number">1</div>
        <div id = "days-unit" class = "unit">den</div>
    </div>
    <div class = "time-container" id = "hours-container">
        <div id = "hours" class = "number">20</div>
        <div id = "hours-unit" class = "unit">hodin</div>
    </div>
    <div class = "time-container" id = "minutes-container">
        <div id = "minutes" class = "number">12</div>
        <div id = "minutes-unit" class = "unit">minut</div>
    </div>
    <div class = "time-container" id = "seconds-container">
        <div id = "seconds" class = "number">22</div>
        <div id = "seconds-unit" class = "unit">vteřin</div>
    </div>
</div>
    <script>
      function reArrangeDigits() {
        const digitDivs = document.getElementsByClassName('number');
       for(let i=0; i<digitDivs.length; i++) {
         const digit = Number(digitDivs[i].innerHTML);
         if (!isNaN(digit) && digit < 10) {
           digitDivs[i].innerHTML = '<span style = "opacity: 0;">0</span>' + digit;
         }
       }
      }
      window.addEventListener('load', reArrangeDigits);
    </script>
  </body>
</html>
03.07.2024 14:27

Сначала вам нужно установить .number на display: flex и text-align: right. Большую часть времени у меня это работает с простой структурой HTML, такой как ваша.

03.07.2024 15:12

Другие вопросы по теме

Списки массивов HTML-элементов, упорядоченные по веб-сайтам в селене/красивом супе
Сетка. Возникли проблемы с элементом div, находящимся поверх элемента div с непрозрачностью
Таблица HTML не отображается правильно при объединении строк соседних столбцов
Как исключить определенные элементы из флексбокса в CSS, не помещая элемент в новый div?
Имейте липкую панель навигации поверх содержащих блоков
Несохраненное состояние флажка с помощью localStorage в Chrome и Edge
Как извлечь динамически генерируемые ссылки с веб-сайта с помощью Python?
SVG не занимает всю ширину контейнера div
Почему мои наведенные изображения не выравниваются в HTML
Размер сгенерированного шрифта HTML отличается от исходного

Похожие вопросы

Скрипт отмены — ячейка КРАСНАЯ
Как работает Vue v-model с update:modelValue и как предотвратить использование логики по умолчанию в зависимости от модального режима
Переменная JavaScript как функция
Как постепенно выбирать элемент из списка для назначения экземпляру при создании
Еще один вопрос о маркере AdvancedMarkerElement. Они не отображаются
Как добавить раскрывающееся меню к одной строке таблицы, отображаемой с помощью rhandsontable, в то время как другие строки содержат числовые значения?
Ts-jest SyntaxError: невозможно использовать оператор импорта вне модуля
Почему создание PDF-файлов Puppeteer не работает в Windows?
Решение для параметризованного тестирования в Cypress
Могут ли настройки ColdFusion 2023 мешать работе JavaScript?