根据条件增加或减少列表项宽度答案

【问题标题】：Increase or decrease the list items width as per the condition根据条件增加或减少列表项宽度
【发布时间】：2016-06-29 14:52:36
【问题描述】：

我有一个如下所示的列表项

<ul>
    <li>One<li>
    <li>One-One<li>
    <li>Two</li>
    <li>Two-Two</li>
</ul>

输出可以是动态的，一次显示两列，一次显示一列像这样

两列方案

一个 |一对一

两个 |二二

一栏场景

一个

两个

请帮助我如何根据场景增加宽度和减少宽度。我正在使用带有 html5 和 css3 的角度 JS。

提前感谢您的帮助。

【问题讨论】：

列表元素的顺序会一样吗？

标签： angularjs html css

【解决方案1】：

使用display:flex 和@media 查询的解决方案。通过调整输出窗口的大小来检查以下示例。

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  width: 50%;
}
@media (max-width: 40em) {
  li {
    width: 100%;
  }
  li:nth-child(even) {
    display: none;
  }
}

<ul>
  <li>One</li>
  <li>One-One</li>
  <li>Two</li>
  <li>Two-Two</li>
</ul>

【讨论】：