时间戳

首页 > 解决方案 > CSS：响应式 UL/LI

css - CSS：响应式 UL/LI

问题描述

我已经在 SO 上看到过这个问题，但我似乎无法让它工作。ul当屏幕尺寸小于 768px 时，我尝试将其变为水平并使其变为垂直。

这是我的CSS代码：

/* HeaderWrap */

#headerwrap {
  background: url(../img/topgraph.png) no-repeat center top; 
  position: relative;
  background-color: #3e86c3;
  background-size: cover;
  margin-top: -20px;
  padding-top: 200px;
  height:100vh;
  background-attachment: scroll;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  min-height: 650px;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#headerwrap h1 {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 15px;
  color: white;
  font-size: 45px;
  font-weight: 300;
  letter-spacing: 1px;
}

#headerwrap h2 {
  text-align: center;
  margin: 60px 200px 15px 200px;
  color: white;
  font-size: 35px;
  font-weight: 300;
  letter-spacing: 1px;

}

#headerwrap .header-links { 
  position: absolute; 
    bottom: 0; 
    text-align: center;
    width: 100%; 
    height: 160px; 
    color: #fff;
    padding-bottom: 20px;
}

#headerwrap ul { 
  text-align: center;
  text-decoration: none;
  list-style-type: none; 
  margin: 0;
  overflow: hidden; 

}

#headerwrap li { 
  float: left;
  padding-left: 18%;
  font-size: 24px;
}



#headerwrap img { 
  width: 100px;
  height: 100px;
}

@media (max-width: 768px) {
  #headerwrap {
    padding-top: 100px;
  }

  #headerwrap h1 {
    margin-top: 60px;
    font-size: 36px;
  }

  #headerwrap h2 {
    margin: 30px 50px 15px 50px;
    font-size: 20px;
  }

  #headerwrap .header-links { 
  position: absolute; 
    bottom: 0; 
    text-align: center;
    width: 100%; 
    height: 340px; 
    color: #fff;
    padding-bottom: 20px;
}

    #headerwrap li { 
      font-size: 18px;
      display: block !important;;
      padding: 0;
  }	

  #headerwrap img { 
  width: 60px;
  height: 60px;
}
<div id="headerwrap">
  <div class="row">
      <h1>Headline</h1>
      <h2>Marketing blurb </h2>

    <div class="col-lg-6">
    </div>
    <div>
        <!--<img src="img/topgraph.png" class="bg">-->
    </div>
  </div>

  <div class="header-links">
      <ul>
          <li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
          <li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
          <li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
      </ul>
  </div>
</div>
<!-- /headerwrap -->

无论我在@media查询中做什么，li元素都保持水平。任何帮助，将不胜感激。

标签： cssresponsive-designmedia-queries

解决方案

在您的身上，您必须将您的和@media的宽度属性设置为ulli100%

@media (max-width: 768px) {
...
#headerwrap ul { 
    float: left;
    width: 100%;
}

#headerwrap li { 
    width: 100%;
}
...
}

推荐阅读