通过Javascript创建的列表项未正确对齐

Question

I need to display video and when user presses menu, I need to divide the screen to 2 halves vertically (adjacent to each other) and I need to display a text in middle (horizontally and vertically) of first half and need to display a list in the second half (this list also should be in middle of 2nd half horizontally and vertically). 我需要显示视频，并且当用户按下菜单时，我需要将屏幕垂直分成两半（彼此相邻），并且需要在前半部分的中间（水平和垂直）显示文本，并且需要显示列表在后半部分（此列表也应在水平和垂直方向上位于后半部分的中间）。 I created a parent div and 2 child divs with flex and adding list items dynamically through javascript. 我使用flex创建了一个父div和2个子div，并通过javascript动态添加了列表项。 Code is as given below. 代码如下。

 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>

But I am facing multiple issues when I ran this as below. 但是当我如下运行时，我面临多个问题。

The whole list is not centered vertically and horizontally in the second half. 整个列表在下半年没有垂直和水平居中。
The list Item is not starting from starting of second half. 列表项不是从下半年开始。
Image on the list is not getting displayed from left of the list. 列表中的图像未从列表左侧显示。
Text on the item is not getting displayed in the center of the list vertically. 项目上的文本不会垂直显示在列表的中央。

Screen shot is as below. 屏幕截图如下。

Can any one please help me to fix these issues? 谁能帮我解决这些问题？

Answer 1

As noted in the comments, it is a little hard to know exactly what you want without an image. 正如评论中指出的那样，要确切地知道没有图像就想要什么有点困难。 But I think this might be moving things in the right direction. 但是我认为这可能会朝着正确的方向发展。

The fixes are as follows 1. add a class to the list item and give it flex properties that make it left-justified ( justify-content: flex-start ) and vertically centered ( align-items: center ). 修复方法如下：1.在列表项中添加一个类，并为其赋予flex属性，使其左对齐（ justify-content: flex-start ）并垂直居中（ align-items: center ）。 2. update the flex properties for the #mid1 and #mid2 elements and align-self on #mid1 to get the text centered in that box. 2.更新#mid1和#mid2元素的flex属性，并在#mid1上align-self ，以使文本在该框中居中。

CSS changes 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 changes 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

  ...
 }

You can see the results here https://codepen.io/bunnymatic/pen/vjobQp . 您可以在这里https://codepen.io/bunnymatic/pen/vjobQp查看结果。 I grabbed a TNT image from Google as a placeholder. 我从Google那里获取了一个TNT图像作为占位符。

Hope this helps 希望这可以帮助

通过Javascript创建的列表项未正确对齐

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-05-27 16:39:56

通过Javascript创建的列表项未正确对齐

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-05-27 16:39:56

解决方案1
1 已采纳 2018-05-27 16:39:56