html - 在媒体查询中调整 div 的大小

标签 html css button responsive-design media-queries

我一直很难弄清楚为什么这不起作用。我有这个按钮，因为它不会在移动设备上切换到 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>

最佳答案

您必须将按钮 css 设置为