React+Semantic UI评论模块如何让div间的hr占满主div宽度

问题根因 #

你遇到的<hr>宽度不匹配问题主要有两个原因：

1. Semantic UI的ui comments类和嵌套评论容器自带默认左内边距，<hr>作为子元素会继承父容器的可用宽度，自然无法对齐最外层主div
2. 你没有给.hr类设置基础重置样式，浏览器默认给<hr>加了左右外边距，进一步压缩了显示宽度

可落地的修改方案 #

方案1：修复<hr>样式（保留现有标签结构） #

首先在styles.scss里补充<hr>的基础样式，覆盖浏览器默认值：

.hr {
  width: 100%;
  /* 重置默认边距 */
  margin: 1em 0;
  /* 去掉默认边框，自定义样式 */
  border: none;
  border-top: 1px solid #e0e0e0;
  /* 避免盒模型计算偏差 */
  box-sizing: border-box;
}

如果你需要<hr>和最外层主容器宽度对齐，不需要跟着嵌套评论缩进，可以给<hr>加负左边距抵消父容器的缩进：

.hr {
  width: 100%;
  margin: 1em 0 1em -2em; /* 负左边距数值和Semantic UI评论缩进值一致即可 */
  border: none;
  border-top: 1px solid #e0e0e0;
  box-sizing: border-box;
}

方案2：不用<hr>，直接用边框实现（更简单，无默认样式冲突） #

直接给评论下方的回复容器加顶部边框当分隔线，完全不用新增<hr>标签，修改你的styles.scss即可：

.comment {
  margin-top: 1.25em;
  border: 2px solid red;
  box-sizing: border-box;
  border-radius: 10px;
  /* 给回复区加顶部边框当分隔线 */
  .comments {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #e0e0e0;
  }
  /* 原来的hr相关代码可以直接删掉 */
  &:last-child {
    margin-bottom: -2em;
    .comments {
      border-top: none;
    }
  }
}

这个方案不需要调整现有JSX结构，也不会出现浏览器默认样式冲突的问题，适配性更好。

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