0

Существует блок с текстом и шкалой прогресса. Главный контейнер гибкий, в отличии от текста и шкалы прогресса. Внутри контейнера тег <a>, который имеет display: grid, а внутри блок с текстом и шкалой. Проблема в том, что расстояние, которое остаётся после позиционирования текста с шкалой появляется справа, а необходимо, чтобы оно было слева.

HTML:

<div class="boost">
  <div class="boostTest">
    <a href="#" class="boostEnlace boostEnlaceHeader">
      <span class="headerBoost">Boost</span>
      <div class="progressTile progressTileHeader">
        <div class="progressTileHeaderWrapper">
          <progress max="100" value="65"></progress>
        </div>
      </div>
    </a>
  </div>
</div>

CSS:

.boostTest {
    max-width: 490px;
}

.boostEnlace.boostEnlaceHeader {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
}

.headerBoost {
    font-weight: 700;
    font-size: 40px;
    color: #291400;
}

.progressTileHeader {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

как надо

1 ответ 1

0

Я добавил ещё один div и пару свойств, проблема исчерпана

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.