html - ul 标签设置响应不工作

Question

我想制作一个响应式 ul 标签，我想要在计算机屏幕上显示两行两列，在移动设备上显示一列四行。我尝试了很多例子，但他们没有帮助我。我是 html 和 css 的新手

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
    li {
      display: inline-block;
      width: 50%;
    }
  @media screen and (min-width: 20em) {
    li {
      width: 33.33333%;
    }
  }

<div class="row">
           <ul>
              <li><a href="#">text1 </a></li>
              <li><a href="#">text2 </a></li>
              <li><a href="#">text3 </a></li>
              <li><a href="#">text4 </a></li>
           </ul>                       
  </div>

所以我想在电脑屏幕上显示这个结果

text1      text2
text3      text4

和移动 View

text1
text2 
text3
text4

Answer 1

您正在使用 <li<a href="#">text2 </a></li>所以请更正您的代码并更改它 <li><a href="#">text2 </a></li>

这是 jsfiddle 链接

update code