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

和移动视图

text1
text2 
text3
text4

Answer 1

您正在使用<li<a href="#">text2 </a></li>，因此请更正您的代码并对其进行更改<li><a href="#">text2 </a></li>

这是jsfiddle链接

<强> update code

Answer 2

因为您添加了＆＃39; twitter-bootstrap＆＃39;标签，我假设你可以使用/正在使用bootstrap。所以你可以简单地使用以下代码：

<div class="row">
     <ul>
        <li class="col-xs-12 col-sm-6"><a href="#">text1 </a></li>
        <li class="col-xs-12 col-sm-6"><a href="#">text2 </a></li>
        <li class="col-xs-12 col-sm-6"><a href="#">text3 </a></li>
        <li class="col-xs-12 col-sm-6"><a href="#">text4 </a></li>
     </ul>                       
</div>

＆＃13;

<div class="row">
         <ul>
            <li class="col-xs-12 col-sm-6"><a href="#">text1 </a></li>
            <li class="col-xs-12 col-sm-6"><a href="#">text2 </a></li>
            <li class="col-xs-12 col-sm-6"><a href="#">text3 </a></li>
            <li class="col-xs-12 col-sm-6"><a href="#">text4 </a></li>
         </ul>                       
</div>

＆＃13;

Answer 3

问题在于您的第二个li语法。

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

ul标签设置响应不起作用

3 个答案: