Question

我正在编写一个简单的考勤webapp，我的问题如下。

在上面的代码中，我得到大约50px的空白区域，我无法解释或摆脱溢出内div的右侧。（一直向右滚动）。

我预计溢出会在＆＃34; Jack＆＃34;之后立即停止。专栏，但它继续。

如何摆脱多余的空间？

.data {
  padding-left: 149px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.data .names > div {
  width: 30px;
  height: 100px;
  display: inline-block;
}
.data .names > div > div {
  width: 100px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  transform: rotate(-90deg) translateX(-100px);
  transform-origin: 0 0;
  padding-left: 1em;
  border-top: 1px solid #ccc;
}
.data .row {
  height: 30px;
  margin-left: 1px;
  display: inline-block;
}
.data .row > div {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.data .row > div:not(:last-child) {
  border-right: 1px solid #ccc;
}
.data .row > div .icon {
  margin-top: 7px;
}
.data .row:hover {
  background-color: rgba(66, 133, 244, 0.3);
}
.data .row:not(:first-child) {
  border-top: 1px solid #ccc;
}

Answer 1

间距是由内width的{{1}}引起的。

请检查小提琴 - http://jsfiddle.net/mf279tnw/5/

div已从width

中删除

和.attendance-sheet .data .names > div > div已添加到border-left

溢出的div内部出现意外的空白区域

1 个答案: