Margin-left使Div宽度超100%，多余横向滚动条问题如何解决？

我帮你捋捋这个问题——你遇到的横向滚动条和多余空白，根源在于**margin-left:170px的特性**：它会让.attendance-sessions的实际占据宽度变成「自身内容宽度 + 170px」，直接超出了父容器的100%宽度，所以行数多的时候就触发了overflow-x:auto，还出现了多余空白。

这里有几个实用的解决方案，你可以根据自己的布局需求选：

方案1：用父容器的padding-left替代子元素的margin-left #

这是最稳妥的方法，不会破坏文档流：把.attendance-sessions的margin-left:170px删掉，转而给它的父容器.attendance-table加padding-left:170px，同时给.attendance-sessions设置width:100%，还要记得给父容器加box-sizing: border-box（确保padding不会让父容器本身溢出）：

.attendance-table {
  padding-left: 170px;
  box-sizing: border-box; /* 关键：让padding包含在容器宽度内 */
}
.attendance-sessions {
  display: flex;
  width: 100%;
  /* 移除原来的margin-left */
}

方案2：用transform: translateX()视觉偏移元素 #

如果你不想改动父容器的样式，可以用transform: translateX(170px)代替margin-left:170px。transform只是视觉上移动元素，不会改变它的占位宽度，自然就不会超出容器了：

.attendance-sessions {
  display: flex;
  transform: translateX(170px);
  /* 移除原来的margin-left */
}

放心，这个方法不会影响元素的交互（比如hover、点击），偏移后的区域依然能正常响应事件。

方案3：相对定位移动元素 #

和transform原理类似，用position: relative; left:170px也能实现同样的效果，同样不改变元素的占位宽度：

.attendance-sessions {
  display: flex;
  position: relative;
  left: 170px;
  /* 移除原来的margin-left */
}

小提示 #

你原来给.session-header里的span设置的旋转和宽度样式完全没问题，不用改动，修复宽度溢出后这些样式依然能正常工作。另外，建议给涉及布局的容器都加上box-sizing: border-box，能避免很多莫名其妙的宽度溢出问题哦～

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