Question

我一直很难弄清楚为什么这不起作用。我有这个按钮，在移动设备上不会切换到100％宽度。当我将它设置为标签但是悬停时我的css动画不起作用时它会起作用...

只需弄清楚如何让div占据移动尺寸的100％屏幕。（jsfiddle here如果您愿意使用它）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      display: inline;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        width: 100%;
        margin: 0;
        color: #000
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

Answer 1

您必须将按钮css设置为

display: block;

在媒体查询中。否则

display: inline;

将使其不会100％宽度

Answer 2

尝试添加

display:block;

到您的媒体查询

将元素显示为内联将使得任何高度和宽度属性都不起作用。

Answer 3

在btn类上显示内联导致问题。还要为所有元素添加box-sizing：border-box。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    body * {
        box-sizing: border-box;
     }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      display: inline;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        display: block;
        width: 100%;
        margin: 0;
        color: #000
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

Answer 4

该按钮是一个内联元素，which不会对其产生任何影响。在媒体查询中将display: inline-block;或block添加到其CSS规则中以避免这种情况。

（还要添加box-sizing: border-box;以防止它离开其容器）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      display: inline;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        width: 100%;
        margin: 0;
        color: #000;
        display: inline-block;
        box-sizing: border-box;
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

调整媒体查询中的div

4 个答案: