RWD布局中父级设padding时hr标签多端差异化显示问题咨询

完全可以在不修改原有.content容器padding设置的前提下实现需求，核心思路是用负外边距抵消移动端下父容器的左右padding，通过媒体查询做差异化适配即可。

具体实现代码 #

只需要在原有CSS基础上新增以下规则即可：

/* 先统一重置hr默认样式，避免浏览器默认样式干扰 */
.content hr {
  margin-left: 0;
  margin-right: 0;
  /* 以下是分割线基础样式可根据实际需求调整 */
  border: none;
  border-top: 1px solid #e5e7eb;
  height: 0;
}

/* 移动端断点，可根据你的实际适配标准调整阈值，此处以常见的768px为界 */
@media (max-width: 767px) {
  .content hr {
    /* 左右负边距值等于父容器的左右padding值，刚好拉满到屏幕边缘 */
    margin-left: -32px;
    margin-right: -32px;
  }
}

原理解释 #

• 桌面端（屏幕宽度≥768px）时，hr没有设置负边距，左右边距为0，边缘刚好贴合.content的padding内侧，和页面其他模块对齐，符合桌面端需求。
• 移动端（屏幕宽度<768px）时，左右各设置-32px的负边距，刚好抵消父容器的左右32px padding，让hr的左右边缘直接对齐屏幕边缘，实现贴边效果。

可维护性优化建议 #

如果后续可能调整.content的左右padding值，可以用CSS变量统一管理，避免后续修改时要同步调整hr的负边距：

:root {
  --content-padding-x: 32px;
}
.content {
  padding: 0 var(--content-padding-x);
}

@media (max-width: 767px) {
  .content hr {
    margin-left: calc(var(--content-padding-x) * -1);
    margin-right: calc(var(--content-padding-x) * -1);
  }
}

内容的提问来源于stack exchange，提问作者AWEI