Элементы списка, созданные с помощью Javascript, не выравниваются должным образом - PullRequest
Новая
       4

Элементы списка, созданные с помощью Javascript, не выравниваются должным образом

0 голосов
/ 27 мая 2018

Мне нужно отобразить видео, и когда пользователь нажимает меню, мне нужно разделить экран на 2 половины по вертикали (рядом друг с другом), и мне нужно отобразить текст посередине (по горизонтали и вертикали) первой половины, и мне нужноотобразить список во второй половине (этот список также должен быть в середине второй половины по горизонтали и вертикали).Я создал родительский div и 2 дочерних div с помощью flex и динамически добавлял элементы списка с помощью javascript.Код указан ниже. 

function displayMenu() {
  var mid = document.getElementById('mid');

  if (mid.classList.contains('hidden') == false) {
    mid.classList.toggle("hidden");
    return;
  }

  var ulid = document.getElementById('ulid');

  for (let index = 0; index < 3; index++) {
    let lItem = document.createElement('li');
    lItem.style.width = '100%';
    lItem.style.height = '150px';
    lItem.style.borderStyle = 'solid';
    lItem.style.borderWidth = '1px';

    let img = document.createElement("img");
    img.src = "img/TNT.png";
    lItem.appendChild(img);
    lItem.appendChild(document.createTextNode('FIRST'));
    ulid.appendChild(lItem);
  }

  mid.classList.toggle("hidden");
}

function changeChannel(e) {
  console.log('received keyEvent : ' + e.keyCode);
  let keyCode = e.keyCode;

  if (keyCode == 77) {
    displayMenu();
  }
}

document.addEventListener('keydown', changeChannel);

displayMenu();
<!DOCTYPE html>
<html>

<head>
  <script src='js/index.js'>
  </script>
  <style>
    html,
    body {
      height: 100%
    }
    
    #vid {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: -1;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
    }
    
    #mid {
      opacity: 0.5;
      display: flex;
      height: 100vmin;
      justify-content: stretch;
      flex-flow: row nowrap;
      z-index: 2;
    }
    
    #mid.hidden {
      display: none;
    }
    
    #mid1,
    #mid2 {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    
    #mid1 {
      background-color: rgba(255, 255, 255, 0.5);
    }
    
    #mid2 {
      background-color: rgba(255, 255, 255, 0.6);
    }
    
    #ulid {
      list-style-type: none;
      width: 100%;
      height: 150px;
    }
  </style>
</head>

<body>
  <video id='vid' src='textMotion.mp4' autoplay loop></video>
  <div id='mid' class='hidden'>
    <div id='mid1'>
      <h1>TEXT</h1>
    </div>
    <div id='mid2'>
      <ul id='ulid'></ul>
    </div>
  </div>
</body>

</html>

Но я столкнулся с несколькими проблемами, когда запустил это, как показано ниже.

  1. Весь список не центрирован по вертикали и горизонтали ввторая половина.
  2. Элемент списка не начинается с начала второй половины.
  3. Изображение в списке не отображается слева от списка.
  4. Текст включенэлемент не отображается в центре списка по вертикали.

Снимок экрана, как показано ниже.

enter image description here

Может ли кто-нибудь помочь мне решить эти проблемы?

1 Ответ

0 голосов
/ 27 мая 2018

Как отмечается в комментариях, немного сложно точно понять, что вы хотите без изображения.Но я думаю, что это может двигать вещи в правильном направлении.

Исправления следующие: 1. добавьте класс в элемент списка и присвойте ему свойства flex, которые делают его выровненным по левому краю (justify-content: flex-start) ивертикально по центру (align-items: center).2. обновите свойства flex для элементов #mid1 и #mid2 и align-self на #mid1, чтобы текст центрировался в этом поле.

Изменения CSS 

.list-item { 
  display:flex;
  align-items: center;
  justify-content: flex-start;
}

#mid1,
#mid2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

#mid1 {
  background-color: rgba(255, 255, 255, 0.5);
  align-self: center;
}

Изменения Javascript 

for (let index = 0; index < 3; index++) {
  let lItem = document.createElement('li');
  lItem.style.width = '100%';
  lItem.style.height = '150px';
  lItem.style.borderStyle = 'solid';
  lItem.style.borderWidth = '1px';
  lItem.classList.add( "list-item" ); // Add a list-item class

  ...
 }

Вы можете увидеть результаты здесь https://codepen.io/bunnymatic/pen/vjobQp. Я взял изображение TNT из Google в качестве заполнителя.

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...