代码之家 › 专栏 › 技术社区 › kadina

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

flexbox css3 html5 css javascript

0

kadina · 技术社区 · 7 年前

我需要显示视频,当用户按下菜单时,我需要将屏幕垂直分成两半(彼此相邻),我需要在上半部分的中间(水平和垂直)显示文本,并需要在下半部分显示列表(此列表也应该在第二部分的中间)半水平和垂直)。我用flex创建了一个父div和两个子div,并通过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 回复 | 直到 7 年前

1

mr rogers 7 年前

正如评论中所指出的,没有图像就很难确切知道你想要什么。但我认为这可能会使事情朝着正确的方向发展。

修复方法如下 1。向列表项添加一个类,并赋予它使其左对齐的灵活属性。( 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图片作为占位符。

希望这有帮助