Question

我正在尝试创建一个响应式网站，我的导航栏有问题。我的导航中有4个项目，我希望他们在屏幕尺寸变小时做出响应（默认情况下它们是垂直的，当尺寸变化时它们会变为水平）。我想知道是否有办法用CSS做到这一点？

.wrap {
  width: 200px;
  height: 200px;
  margin-right: 20px;
  position: relative;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
}
.nav{
  list-style-type:none;
    display: flex; 
}

<ul class="nav">
   <a href="#"<li><div class="wrap"><img src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w1"><span class="web"></span></div></li></a>
   <a href="#"<li><div class="wrap"><img src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w2"><span class="web"></span></div></li></a>
   <a href="#"<li><div class="wrap"><img src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w3"><span class="web"></span></div></li></a>
   <a href="#"<li><div class="wrap"><img src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w4"><span class="web"></span></div></li></a>
</ul>

Answer 1

您需要使用媒体查询。看看这个：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

此外，您的列表应如下所示：

<ul>
   <li><a href=""> CONTENT HERE </a></li>
   <li><a href=""> CONTENT HERE </a></li>
   <li><a href=""> CONTENT HERE </a></li>
</ul>

使用W3C Validator检查您的HTML，他们会为您提供错误和正确的超详细列表：https://validator.w3.org/

Answer 2

使用媒体查询或只是使用bootstrap我使用bootstrap为你做了一个响应示例 垂直示例

＆＃13;

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <ul class="nav list-group"><li class="list-group-item">  <a href="#"<li><div class="wrap"><img class="img-responsive" src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w1"><span class="web"></span></div></li></a>
            
                       <li class="list-group-item"> <a href="#"<li><div class="wrap"><img class="img-responsive"  src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w2"><span class="web"></span></div></li></a>
                      <li class="list-group-item">  <a href="#"<li><div class="wrap"><img class="img-responsive" src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w3"><span class="web"></span></div></li></a>
                     <li class="list-group-item">   <a href="#"<li><div class="wrap"><img class="img-responsive" src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w4"><span class="web"></span></div></li></a>
                    </ul>

＆＃13;

横向示例

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul class="list-inline"><li>  <a href="#"<li><div class="wrap"><img class="img-responsive" src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w1"><span class="web"></span></div></li></a>
        
                   <li> <a href="#"<li><div class="wrap"><img class="img-responsive"  src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w2"><span class="web"></span></div></li></a>
                  <li>  <a href="#"<li><div class="wrap"><img class="img-responsive" src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w3"><span class="web"></span></div></li></a>
                 <li>   <a href="#"<li><div class="wrap"><img class="img-responsive" src="http://hd.wallpaperswide.com/thumbs/fantasy_32-t2.jpg" alt="wd" width="200" height="200" class="w4"><span class="web"></span></div></li></a>
                </ul>

＆＃13;

如何制作响应式ul？

2 个答案: