媒体查询设置元素display:block不生效问题求助

你遇到的问题核心其实很直白——CSS选择器匹配错了目标元素！

仔细看你的HTML结构，下载按钮是直接嵌套在.kdown容器里的<a>标签，整个结构里根本没有<p>元素，但你在移动端媒体查询里却一直给.kdown p设置display:block，这相当于对着空气写样式，自然不会有任何效果。

修正后的CSS代码 #

把移动端媒体查询里的.kdown p替换成.kdown a，同时为了彻底解决移动端按钮的排版问题，还可以补充一些适配样式，调整后的完整媒体查询代码如下：

@media screen and (max-width: 700px) {
  .traki { margin-left: 0px !important; text-align: center !important; }
  .kdown h6 { font-size: 15px !important; }
  /* 修正选择器，针对a标签设置独占一行 */
  .kdown a { 
    display: block !important; 
    margin-left: 0 !important; /* 覆盖桌面端的左侧间距 */
    margin-bottom: 8px; /* 可选：给按钮添加垂直间距，提升移动端视觉体验 */
    width: 100%; /* 可选：让按钮铺满容器宽度，更适配小屏幕 */
    box-sizing: border-box; /* 配合宽度设置，避免padding撑破容器 */
  }
}

@media screen and (min-width: 701px) {
  .kdown a { display: inline-block !important; } /* 用inline-block替代inline，能保留宽高样式 */
  .kdown { text-align: center !important; }
}

额外优化建议 #

1. 桌面端优先用inline-block：inline元素会忽略你设置的width和height，inline-block既能让按钮在一行排列，又能完整保留你定义的宽高、内边距等样式。
2. 减少!important的使用：如果遇到样式优先级冲突，可以通过提升选择器权重解决，比如用.kdown > a（直接子元素选择器）代替.kdown a，权重更高，就不需要依赖!important强制覆盖了。
3. 移动端适配细节：给按钮设置box-sizing: border-box，可以避免内边距和边框撑宽按钮，保证布局的稳定性。

内容的提问来源于stack exchange，提问作者ნიკა ხაჩიძე