使用JavaScript

Question

需要在中心对齐我的奇数列表iteam。意思是如果我有五个列表迭代，如下所示，那么最后li应该对齐中心其他人应该在移动设备中并排排列。

<ul>
<li> name1</li>
<li> name2</li>
<li> name3</li>
<li> name4</li>
<li> name5</li>
</ul>

所以拳头我需要验证li计数是否以奇数或偶数结束然后我需要对齐屏幕的最后一个li中心。

Answer 1

由于JS只是设置了适合的CSS属性，你可以查看一个纯css解决方案是否适合你的问题。

请参阅：https://stackoverflow.com/a/5080748/1614903

Answer 2

假设数据不会按升序显示，则可能需要JavaScript解决方案。请参阅我的示例以获取概念证明。当数据按升序显示时，CSS解决方案会很好。

＆＃13;

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  var list1 = document.querySelector('#list1');
  var listItems = list1.querySelectorAll('li');

  for (var li of listItems) {
    addCenterAlignToListItem(li);
  }
});

function addCenterAlignToListItem(li) {
  var txt = li.textContent;
  // RegEx matches a number at the end of the string.
  var num = txt.match(/\d+$/);
  
  if (!num) {
    // There was no number at the
    // end of the string.
    return;
  } else {
    // Get the string from the
    // regex match.
    num = num.pop();
  }

  if (num % 2 === 1) {
    // This is odd
    li.classList.add('centered');
  }
}

＆＃13;

.centered {
  text-align: center;
}

＆＃13;

<!-- 
  The list is intentionally
  out of order.
-->

<ul id="list1">
  <li>name2</li>
  <li>name5</li>
  <li>name1</li>
  <li>name3</li>
  <li>name4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

希望这适合你！

＆＃13;

＆＃13;

.list li {
    text-align: inherit;
}
.list li:nth-child(odd) {
    text-align: center;
}
.list li:nth-child(even) {
    text-align: inherit;
}

＆＃13;

<ul class="list">
  <li> name1</li>
  <li> name2</li>
  <li> name3</li>
  <li> name4</li>
  <li> name5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;