Search code examples
javascriptjqueryhtmlcssalignment

Float to left text in <li>

I have this code in View 

  body .vr-list {
        padding: 0 20px !important;
        margin-top: 70px !important;
        text-align: left !important;
    }
  <ol class="vr-list" style="padding-left:540px;padding-top:10px;">
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Обзор существующих технологий  и применяемых api </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Общие понятия WebGL</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Интерактивный 3D rendering </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Основные идеи виртуальной реальности</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Интерактивность и FPS</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">FPS и частота обновления экрана </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Процессорный цикл</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Человеческий глаз против камеры </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Построение базовой 3D сцены</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Свет и rendering</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">История появления первой 3D модели</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Баланс цвета и пропорции соотношения цветов. Работа с цветовыми кругами Джонаса Иттена </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">WebGL и three.js </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Основы UI/UX дизайна для 3D сайтов</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Oсновные ошибки при построении 3D сцен</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Выпускной курсовой проект</span></li>

            </ol>

It shows list but text inside <li> tag is centered

Here is screen.

Screen

How I can make it on left not centered?

Solution

  • You need to apply the text-align style to your li elements (Not just the main ul):

    body .vr-list li {
    text-align: left !important;
}