Можно ли выровнять вертикальную линию индикатора выполнения в соответствии с разрешением?

Моя цель — идеально выровнять вертикальную линию посередине, даже если мы сжимаем страницу. Можно ли сделать расклад эффективным?

Я пробовал таким образом

 <Card>
    <CardContent>
        <progress max = {1000} value = {500} />
        <p className = "vertical_line"></p>
    </CardContent>
</Card>

CSS:

.vertical_line {
  border-left: 1px solid black;
  height: 20px;
  position: absolute;
  top: 8px;
  left: 17.5%;
}

Вот пример (https://codesandbox.io/s/restless-cache-uj2z0)

Но не мог точно получить, может ли кто-нибудь помочь мне в этом запросе?

Да, не используйте относительную меру, такую как процент.

— 21.12.2020 11:41

@DennisVash - Не могли бы вы помочь мне с этим вопросом?

— 21.12.2020 11:43

left: 104px или рассчитать его динамически, есть много похожих вопросов, которые вы можете найти

— 21.12.2020 11:46

@DennisVash - Но когда я разворачиваю или сворачиваю страницу... вертикальная линия не выравнивается должным образом

— 21.12.2020 11:47

почему ты не использовал svg?

— 21.12.2020 11:50

@ b3hr4d - для прогресса или вертикальной линии?

— 21.12.2020 11:51

для обоих, плохо сделать у вас пример!

— 21.12.2020 11:53

@ b3hr4d - Примечание. Значение индикатора выполнения будет динамически меняться.

— 21.12.2020 11:55

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

— 21.12.2020 11:58

html css reactjs

21.12.2020 11:32

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

593

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

Примечание: я начал правило left: 49.5%. Поскольку ширина линии равна 1px. Это означает, что линия идеально отцентрована.

Попробуйте этот код:

стиль.css

.vertical_line {
  border-left: 1px solid black;
  height: 20px;
  position: absolute;
  top: 0;
  left: 49.5%;
}

.progress_container {
  position: relative;
  display: inline-block;
}

App.js

export default function App() {
  return (
    <div>
      <Card>
        <CardContent
        className = {'progress_container'}
        >
          <progress max = {1000} value = {500} />
          <p className = "vertical_line"></p>
        </CardContent>
      </Card>
    </div>
  );
}

@Арунья, рад помочь

— 21.12.2020 12:08

21.12.2020 11:57

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

const Progress = ({max,value})=> { 
  const width = max + 5;
  return (
  <svg width = {width} height = "20">
  <line
    x1 = {5}
    y1 = {10}
    x2 = {max}
    y2 = {10}
    strokeWidth = {5}
    strokeLinecap = "round"
    stroke = "grey"
  />
  <style>{"@keyframes draw{to{stroke-dashoffset:0}}"}</style>
  <line
    style = {{
      strokeDasharray: width,
      strokeDashoffset: width,
      animation: "draw 1s linear forwards",
    }}
    x1 = {5}
    y1 = {10}
    x2 = {value}
    y2 = {10}
    strokeWidth = {5}
    strokeLinecap = "round"
    stroke = {"red"}
  />
  <line x1 = {width/2} y1 = {0} x2 = {width/2} y2 = {20} strokeWidth = {2} stroke = "black" />
</svg>
  )
}
const App = ()=> <Progress max = {200} value = {100} />

ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id = "react"></div>

21.12.2020 12:05

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

В чем разница между паролем типа ввода - автозаполнение «вкл» и «текущий пароль» в html-форме?

Блокируйте контент в верхней части тела героя с помощью Bulma

Показывать всплывающее окно при наведении на слой в реагирующей листовке

Как добавить стильные линии разрыва для текста, такого как «___» и «-», с помощью CSS и HTML?

Ag-щелчок кнопки сетки не работает внутри ячейки

Как расширить/настроить потомков класса начальной загрузки с помощью SASS?

Запрещено У вас нет прав доступа к этому ресурсу. Apache/2.4.46 (Win64) OpenSSL/1.1.1g PHP/7.2.34 Сервер на локальном хосте Порт 80

Img не масштабируется при наведении

Мне нужно, чтобы вертикальный и горизонтальный текст объединялся с помощью CSS, например, прикрепленное изображение

Закрытие модального окна в vanilla js

Можно ли выровнять вертикальную линию индикатора выполнения в соответствии с разрешением?

Ответы 2

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

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