媒体查询中Div宽度调整问题：移动端Div按钮无法占满屏幕

我来帮你搞定这两个头疼的问题，咱们一步步来：

一、Div按钮移动端占满宽度的解决方案 #

你当前的.btn设置了display: inline，而inline元素是不支持设置width属性的，这就是为什么移动端加了width:100%却没效果的核心原因。

修改步骤很简单：

1. 把.btn的display改成inline-block——既保留桌面端行内排列的特性，又能支持width、padding等盒模型属性。
2. 在移动端媒体查询里，把.btn的display设置为block，这样就能自动占满父容器的宽度，再配合width:100%（其实block元素不加width也会默认占满，但加上更保险）。

二、换成a标签后Hover动画失效的解决 #

换成a标签后hover动画失效，主要是两个小细节没注意：

• a标签需要有href属性（哪怕是href="#"），浏览器才会把它识别为可交互的链接元素，hover状态才会正常触发。
• 要给a标签去掉默认的下划线样式，避免干扰视觉，同时确保display属性设置正确（同样用inline-block/block）。

修改后的完整代码 #

版本1：Div按钮（修复移动端宽度） #

<!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-block; /* 替换原有的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: block; /* 移动端设置为block占满宽度 */
  }
}
</style>
</head>
<body>
<div class="btnContainer">
  <div class="btn ctaSlide">Shop now</div>
</div>
</body>
</html>

版本2：a标签按钮（修复Hover动画） #

<!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-block;
  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;
  text-decoration: none; /* 去掉a标签默认下划线 */
}
.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: block;
  }
}
</style>
</head>
<body>
<div class="btnContainer">
  <a href="#" class="btn ctaSlide">Shop now</a> <!-- 替换为a标签并添加href属性 -->
</div>
</body>
</html>

关键修改点总结 #

• 把.btn的display从inline改为inline-block，让元素支持width属性。
• 移动端媒体查询中设置display:block，确保按钮占满屏幕宽度。
• 换成a标签时，必须添加href属性，同时去掉默认下划线避免样式干扰。

内容的提问来源于stack exchange，提问作者jcooke.mn