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

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

display: block;

在媒体查询中。否则

display: inline;

可以防止宽度为100％

关于html - 在媒体查询中调整div的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50414422/