Question

我已经在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元素都保持水平。任何帮助，将不胜感激。

Answer 1

在您的@media上，您必须将ul和li的width属性设置为100%

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

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

Answer 2

使用flexbox的非常简单的示例。

https://codepen.io/anon/pen/QZEXVg

键是执行约束的媒体查询。

@media (min-width: 768px) {
  .navbar__list {
    display: flex;
    justify-content: flex-start;
  }
}

Answer 3

在width: 100%查询的<li>中添加@media。

演示：

/* 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;
      width: 100%
  }	

  #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 -->

Answer 4

删除float: left;中的“常规” li元素，然后添加display: inline-block。否则，它们也会在较小的屏幕上浮动（并排显示）。

或在媒体查询中添加float: none。

CSS：自适应UL / LI

4 个答案: